[英]Inserting dynamic option in the select tag, using Jquery
我写了这个jQuery代码:
$(document).ready(function(){
$(document).on('change', '.prova > .target', function() {
$('div').removeClass('prova');
$(this).parent().after($('<br>'), $('<div>', {"class": 'prova'}).append(
$('<select>', {"class": 'target'}).append(
$('<option>', {value: 'option1', text: 'Option 1'}),
$('<option>', {value: 'option2', text: 'Option 2'})
),$('<input>', {type: 'number', style: 'width: 35px', min: '1', max: '99', value: '1'}),
$('<button>', {type: 'button' , "class": 'remove_item', text: 'delete' })));
});
});
完整的例子在这里
我的代码的目的如下:
每次从<select>
(仅最后一个)中<select>
一个新<select>
都会创建一个新的<select>
。
现在我要添加动态选项,而不是从jquery代码添加的静态选项。 例如,假设我有
var obj = {
"option1": "Option 1",
"option2": "Option 2"
};
如何在我的jquery代码中集成上面列出的选项而不是静态插入项:
...
$('<option>', {value: 'option1', text: 'Option 1'}),
$('<option>', {value: 'option2', text: 'Option 2'})
...
你可以这样做:
var $mySelect = $('<select>', {
class: 'target'
});
$.each(obj, function (val, text) {
$mySelect.append($('<option />', {
value: val,
text: text
}));
});
var $input = $('<input>', {
type: 'number',
style: 'width: 35px',
min: '1',
max: '99',
value: '1'
});
var $button = $('<button>', {
type: 'button',
class: 'remove_item',
text: 'delete'
});
$(this).parent().after($('<br>', {
class: 'acapo'
}), $('<div>', {
class: 'prova'
}).append($mySelect, $input, $button));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.