在將行動態添加到表時，為什么“選擇”框沒有更改值？
[英]Why the Select box is not changing the value while dynamically adding the Row to the table?
問題描述
嗨，我有代碼，我只是動態地添加一行。但是問題是選擇框中的下一行的值沒有改變。然后如何使用Jquery Mobile實現此操作。下面是我的代碼。
$(document).ready(function() { $("input.add").on('click', function() { // brace missing var $tr = $(this).closest('tr'); var $clone = $tr.clone(); $clone.find(':text').val(''); $clone.find(':checkbox:checked').prop('checked', false).val('N'); $clone.find('#preferred').val('N'); //$clone.find('#phntype').selectmenu("refresh", true); $tr.after($clone); }); });
<!DOCTYPE html> <html> <head> <title>Welcome</title> <link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-2.1.1.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body> <form name="form" id="form" method="post" action="%bind(:11)"> <label></label> <!--/Phone Table Information --> <table border="1" id="phone" width="100%" name="phone"> <tr> <th>Type</th> <th>Country Code</th> <th>*Phone</th> <th>Preferred</th> <th>Add/Delete</th> </tr> <tr> <td> <div data-role="fieldcontain"> <select name="phntype" id="phntype"> <option value="BUSN" selected="">Business</option> <option value="CAMP">Campus</option> <option value="CEL2">Cellphone2</option> <option value="CELL">Cellphone</option> <option value="FAX">FAX</option> <option value="HOME">Home</option> <option value="OTR">Other</option> </select> </div> </td> <td> <div data-role="fieldcontain"> <label id="Streetlbl">Street:</label> <input type="text" id="Street" name="Street" value="" /> </div> </td> <td> <div data-role="fieldcontain"> <label id="Streetlbl">Street:</label> <input type="text" id="Street" name="Street" value="" /> </div> </td> <td> <div data-role="fieldcontain"> <label id="Streetlbl">Street:</label> <input type="text" id="Street" name="Street" value="" /> </div> </td> <td> <input type='button' value='+' class='add' /> <input type='button' value='-' class='delete' /> </td> </tr> </table> <p></p> </form> </body> </html>
1 個解決方案
解決方案1
1 2015-06-01 13:36:23
添加下面的代碼在你js ，我想建議添加class到您的select ，而不是id ，因為你是克隆整個控制和追加到DOM和具有類似id在S DOM是對DOM的規則和做法不好。 因此，只需將課程添加到您的select
$(document).on('change','.phntype',function(){
$(this).prev('span.phntype').text($(this).find('option:selected').text());
});
添加class ，刪除id
<select name="phntype" class="phntype">
使用jQuery動態添加表行，然后在每個新行中添加自動填充選擇框
[英]Dynamically adding a table row with jquery, then add auto populate select box in each new row
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.