在选择标签中插入动态选项,使用Jquery
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>
。
现在我想添加,而不是从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));
<<p> 小提琴演示/strong> 相关文章:
- 使用Javascript获取所选选项ID
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 使用此选项选择父类内部的类
- 如何使用AngularJs禁用ng选项中的选项
- 如何使用JS禁用表行,并在MYSQL中插入所选选项
- 使用JavaScript在IE9中获取数据列表选项
- 使用基于文本的 Jquery 选择选项
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 在新选项卡中打开链接,但不使用_blank方法
- 过滤”;溢价;页面加载选项使用混合
- 默认按表列选择选项(使用Javascript)
- 编译为JavaScript选项,该选项使用十进制库而不是IEEE 754数学
- 如何从使用 php 动态创建的选项使用 php 将值发布到数据库
- 从表单选项&使用它来填充多个字段
- 创建自定义排序函数,作为脚本中的选项使用
- 改变& lt; select>选项使用jquery .change函数
- Angularjs 选择选项使用角度材料
- 添加背景颜色的选项使用jquery
- 模型视图控制器-动态下拉列表和它的选项使用javascript在表行