当从下拉列表中单击时，我面临着创建动态标签和输入字段的问题，每个输入具有唯一的 ID 和唯一的名称 我们如何取消选中下拉列表或单击所选项目的删除按钮时。
任何帮助将不胜感激。提前致谢
如果从下拉列表中选择了两个项目，即[发票城市]和[发票日期]，则标签和输入字段都应使用具有删除按钮的唯一 ID** 创建，以便在删除按钮时从下拉列表中取消选中该项目单击选择项目
var options = [{
"text": "New 1",
"value": "[Invoice city]"
},
{
"text": "New 2",
"value": "[Invoice Date]"
},
{
"text": "Ocv 3",
"value": "val 3"
},
{
"text": "Option 4",
"value": "Value 4"
},
{
"text": "Option 5",
"value": "Value 5"
}
];
var selectBox = document.getElementById('multichecks');
for (var i = 0, l = options.length; i < l; i++) {
var option = options[i];
selectBox.options.add(new Option(option.text, option.value, option.selected));
}
$(document).ready(function() {
function generate(option){
var ops = $('#multichecks option:selected');
var selected = [];
$(ops).each(function() {
selected.push([$(this).val()]);
});
$('#dvContainer').html('');
$(selected).each(function(index, ops) {
if (ops){
$('#dvContainer').html($('#dvContainer').html() +'<div><label id="lbl'+ops+'"> '+ops+':</label><input type="text" id="txt'+ops+'" /><button class="bgen" id="btn'+ops+'">X</button></div>');
}
});
}
function textinside(option){
var ops = $('#multichecks option:selected');
var selected = [];
$(ops).each(function() {
selected.push([$(this).val()]);
});
$('#9MMM').html('');
$(selected).each(function(index, ops) {
if (ops){
$('#9MMM').html($('#9MMM').html() +'<label class = "custom_label_div2" id="lbl'+ops+'"> '+ops+'; </label>');
}
});
}
$('#multichecks').multiselect({
nonSelectedText: 'Check an option!',
maxHeight: 200,
numberDisplayed: 2,
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
includeSelectAllOption: true,
selectAllText: 'Check all!',
onChange: function (option) {
textinside(option);
generate(option)
},
onSelectAll: function() {
textinside(option);
generate(option)
}
});
$(document).on('click', '.bgen', function() {
$(this).parent().remove();
var str = this.id.replace("btn","");
$("#multichecks").multiselect('deselect', str);
});
}); <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<link rel="stylesheet" href = "new.css" >
</head>
<body>
<!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> style="border:1px solid gray; width:150px;" -->
<hr />
<div class="box" id="box4">
<h2> STEP 4 </h2>
<strong>Where Condition :</strong>
<div class="UZI" id="9MM" >
<select id="multichecks" multiple="multiple"></select>
</div>
<hr />
<strong>Selected Columns :</strong>
<div class = "VSS" id = "9MMM" style="border:1px solid gray; width:150px;" >
</div>
<hr />
<div class = "inputBox" id="dvContainer"></div>
<hr/>
</div>最佳答案
您可以使用您的 ID 添加选择选项值以使其唯一。并确保在 onChange 和 onSelectAll 方法中添加动态 html。
var options = [{
"text": "New 1",
"value": "[Invoice city]"
},
{
"text": "New 2",
"value": "[Invoice Date]"
},
{
"text": "Ocv 3",
"value": "val 3"
},
{
"text": "Option 4",
"value": "Value 4"
},
{
"text": "Option 5",
"value": "Value 5"
}
];
var selectBox = document.getElementById('multichecks');
for (var i = 0, l = options.length; i < l; i++) {
var option = options[i];
selectBox.options.add(new Option(option.text, option.value, option.selected));
}
$(document).ready(function() {
function generate(option){
var ops = $('#multichecks option:selected');
var selected = [];
$(ops).each(function() {
selected.push([$(this).val()]);
});
$('#dvContainer').html('');
$(selected).each(function(index, ops) {
if ("[Invoice city]" == ops || "[Invoice Date]" == ops){
$('#dvContainer').html($('#dvContainer').html() +'<div><label id="lbl'+ops+'">Label for '+ops+':</label><input type="text" id="txt'+ops+'" /><button class="bgen" id="btn'+ops+'">X</button></div>');
}
});
}
$('#multichecks').multiselect({
nonSelectedText: 'Check an option!',
maxHeight: 200,
numberDisplayed: 2,
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
includeSelectAllOption: true,
selectAllText: 'Check all!',
onChange: function (option) {
generate(option);
},
onSelectAll: function() {
generate(option);
}
});
$(document).on('click', '.bgen', function() {
$(this).parent().remove();
var str = this.id.replace("btn","");
$("#multichecks").multiselect('deselect', str);
});
});<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
</head>
<body>
<!-- <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" /> -->
<hr />
<div class="" id="">
<strong>Where Condition :</strong>
<div class="newa" id="newq">
<select id="multichecks" multiple="multiple" onclick="test();"></select>
</div>
<hr />
<div id="dvContainer"></div>
<hr/>
</div>关于javascript - 如何在javascript中为下拉所选项目生成具有唯一id、名称的动态标签和输入字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59234344/