我正在使用“动态添加/删除字段”脚本基于Charlie Griefe的精彩帖子。但是当我尝试克隆选择菜单时,jQuery Mobile只允许我在静态选择菜单中选择值。
克隆我的选择菜单的脚本
<script>
$(document).ready(function() {
$('#btnAdd').click( function() {
$('#btnDel').removeAttr('disabled').button('enable'); // enable the "del" button
// how many "duplicatable" input fields we currently have
var num = $('.clonedInput').length;
// the numeric ID of the new input field being added
var newNum = new Number(num + 1);
var newElem = $('#input' + num ).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr( 'id', 'name' + newNum ).attr('name', 'name_label[]');
$('#input' + num).after(newElem);
// business rule: limit the number of fields to 5
if (newNum == 5) {
$('#btnAdd' ).attr('disabled', 'disabled').button('disable');
$('#btnAdd').parent().find('.ui-btn-text').text('maximum fields reached');
}
});
$( '#btnDel' ).click( function() {
// how many "duplicatable" input fields we currently have
var num = $( '.clonedInput' ).length;
// remove the last element
$('#input' + num ).remove();
// enable the "add" button, since we've removed one
$('#btnAdd').removeAttr('disabled').button('enable');
$('#btnAdd').parent().find('.ui-btn-text').text('add another name');
// if only one element remains, disable the "remove" button
if ( num-1 == 1 )
$('#btnDel' ).attr('disabled', 'disabled').button('disable');
});
});
</script>
选择菜单:
div id="input1" class="clonedInput" style="margin-bottom: 4px;">
<div data-role="fieldcontain">
<label for="item_ordered">Ordered Item:</label>
<?php
$conn = new mysqli('localhost', 'root', 'root', 'retail_management_db')
or die ('Cannot connect to db');
$result = $conn->query("SELECT item_Id,itemName FROM CompanyInventory");
echo '<select name="itm_order" value="'.escape(Input::get('itm_order')).'"><option>Select Item</option>';
while ($row = $result->fetch_assoc()) {
unset($id, $name);
$id = $row['item_Id'];
$name = $row['itemName'];
echo '<option value="'.$name.'">'.$name.'</option>';
}
echo '</select>';
?>
</div>
<div data-role="fieldcontain">
<label for="item_ordered">Units:</label>
<input type="text" name="quantity" id="quantity" value="<?php echo escape(Input::get('quantity')); ?>">
</div>
</div>
<div>
<input id="btnAdd" type="button" value="Add another item" data-inline="true">
<input id="btnDel" type="button" value="Remove item" disabled="disabled" data-inline="true">
</div>
我还要将数据库中的值动态添加到选择菜单中。