bootstrap模態框傳值問題
阿新 • • 發佈:2019-01-05
關於模態框傳值的方法有很多種,這裡我主要記錄下我傳遞的過程。
<div style="height: 90px;" class="default"> <p>${receiver.consignee}</p> <p>${receiver.phone}</p> <p>${receiver.address}</p><input type="button" class="btn upd" value="修改" data-toggle="modal" data-target="#addressModal" onclick="editAddress(${receiver.id},this)">
主要就是點選這個button彈出模態框,讓div中的引數傳遞到模態框中。</div>
<!--修改地址彈出層-->
<div class="modal fade" id="addressModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:50px; padding-left:0px"> <form id="saveAddForm" action="${base}/member/order/editAddressInfo.jhtml" method="post" > <input type="hidden" name="id" value="" id="rid"/> <div class="modal-header" style="text-align: center"> <h3 id="myModalLabel">修改資訊</h3> </div> <div class="modal-body"> <div class="row" style="padding-left:50px"> <div class="lable"><b>*</b>姓名</div> <div class="input"> <input type="text" name="consignee" id="con" value="" placeholder="姓名" style="width: 400px;height: 37px; float: left;"/> </div> </div> <div class="row" style="padding-left:50px"> <div class="lable"><b>*</b>手機</div> <div class="input"> <input type="text" name="phone" id="pho" value="" placeholder="手機" style="width: 400px;height: 37px; float: left;" /> </div> </div> <div class="row" style="padding-left:50px"> <div class="lable"><b>*</b>地址</div> <div class="input"> <input type="text" name="address" id="add" value="" placeholder="地址" style="width: 400px;height: 37px; float: left;"/> </div> </div> <div class="modal-footer" style="text-align: center"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="submit" class="btn btn-primary">儲存</button> </div> </div> </form> </div>
<!--彈出層結束-->
傳遞引數的js程式碼如下:
//模態框傳值 function editAddress(id,obj){ $("#rid").val(id); var name=$(obj).parent().find('p')[0];//通過parent()方法返回被選元素的直接父元素,找到第一個P標籤。 var consignee =$(name).text(); //獲取P標籤中的內容 $("#con").val(consignee); //賦值給模態框中的input var phone=$(obj).parent().find('p')[1]; var mob=$(phone).text(); $("#pho").val(mob); var address=$(obj).parent().find('p')[2]; var addr=$(address).text(); $("#add").val(addr); }