我如何使用JQuery删除和添加动态创建的下拉列表中的值？ [英] how do i remove and add value in dynamic created dropdown using JQuery?
本文介绍了我如何使用JQuery删除和添加动态创建的下拉列表中的值？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的要求是：
1 - 如果我从下拉菜单中选择任何选项，那么除了当前的下拉菜单，它不应该显示在其他下拉菜单中。
2 - 如果我将上面选择的选项更改为其他选项，那么先前选择的选项应该在所有下拉菜单中再次显示（添加）新的应该从所有其他下拉列表中删除。
HTML
$ b
< table class =table table-bordered centeredContent multiSelectFunctionalityid =table>
< tbody>
< tr>
< td>
< button type =buttonclass =btn btn-plus custom-icon glyphicon glyphicon-plusonclick =cloneRow（）; title =添加行>< / button>
< / td>
< td>
< select class =selectedItem form-controlname =selectedItemid =selectedItem_1>
< option value =entityName>实体名称< / option>
< option value =transmitter_mac>标签Mac< / option>
< option value =tag_number>标签编号< / option>
< option value =sub_category>子类别< / option>
< option value =name>部门名称< / option>
< option value =in_time>在时间< / option>
< option value =out_time> Out Time< / option>
< / select>
< / td>
< td>
< input class =form-control searchItemplaceholder =Enter Search itemname =searchItem/>
<！ - < input type =hiddenname =counterValueid =counterValuevalue => - >
< / td>
< / tr>
< / tbody>
< / table>
JavaScript
函数cloneRow（）{
counter ++;
if（counter> = 7）{
return;
} else {
var a = $（table＃table）。find（tbody）;
var b = a.find（tr：first）;
$ trLast1 = a.find（tr：last）;
$ trNew = b.clone（）;
$ trNew.find（button＃dltbtn）。remove（）。end（）;
$ trNew.find（td：first）。append（'< button type =buttonclass =btn btn-plus custom-icon glyphicon glyphicon-minusonclick =deleteRow（this）; title =删除行>< / button>'）;
$ trLast1.after（$ trNew）;
函数deleteRow（a）{
$（a）.closest（tr）。remove（）;
counter--;
}
解决方案
var rowCount = 1;
函数cloneRow（self）{
if（rowCount == 7）{
$（。glyphicon-plus）。attr（disabled，true）;
return;
}
else {
var a = $（table＃table）。find（tbody）;
var b = a.find（tr：first）;
$ trLast1 = a.find（tr：last）;
$ trNew = b.clone（）;
$ trNew.find（button＃dltbtn）。remove（）。end（）;
$ trNew.find（td：first）。append（'< button type =buttonclass =btn btn-plus custom-icon glyphicon glyphicon-minusonclick =deleteRow（this）; title =删除行>< / button>'）;
$ trLast1.after（$ trNew）;
rowCount = $（'table＃table tr：last'）。index（）+ 1;
manage_opns（）;
$ b $（document）.on（'change'，'.selectedItem'，function（e，el）{
manage_opns（）;
}）;
函数manage_opns（）{
$（select.selectedItem option）。attr（'disabled'，false）;
$（select.selectedItem）。each（function（i，el）{
var cur_val = $（el）.val（）;
if（cur_val！=''） {
$（select.selectedItem option [value ='+ cur_val +'）。attr（'disabled'，true）;
$（el）.find（option [value = ''+ cur_val +'']）。attr（'disabled'，false）;
}
}）;
函数deleteRow（a）{
$（a）.closest（tr）。remove（）;
rowCount = $（'table＃table tr：last'）。index（）+ 1;
if（rowCount< = 7）{
$（。glyphicon-plus）。attr（disabled，false）;
}
manage_opns（）;
}
HTML代码
< table class =table table-bordered centeredContentid =table>
< tbody>
< tr>
< td>< button type =buttonclass =btn btn-plus custom-icon glyphicon glyphicon-plusonclick =cloneRow（this）; title =添加行>< / button>
< / td>
< td>
< select class =selectedItem required-report input-normal input-width-45name =selectedItem>
< option value =entityName>实体名称< / option>
< option value =transmitter_mac>标签Mac< / option>
< option value =tag_number>标签编号< / option>
< option value =sub_category>子类别< / option>
< option value =name>部门名称< / option>
< option value =in_time>在时间< / option>
< option value =out_time> Out Time< / option>
< / select>
< / td>
< td>
< input class =searchItem input-normal input-width-45 required-reportplaceholder =Enter Search itemname =searchItem/>
< / td>
< / tr>
< / tbody>
< / table>
现在您可以看到功能
My requirements are:
1 - If I select any option from drop down then it should not show up in any other drop down except current one.
2 - If I change the above selected option to something else then the previous selected option should show up(added) again in all drop downs & new one should be removed from all other dropdowns.
HTML
<table class="table table-bordered centeredContent multiSelectFunctionality" id="table">
<tbody>
<tr>
<td>
<button type="button" class="btn btn-plus custom-icon glyphicon glyphicon-plus" onclick="cloneRow();" title="Add Row"></button>
</td>
<td>
<select class="selectedItem form-control" name="selectedItem" id="selectedItem_1">
<option value="entityName">Entity Name</option>
<option value="transmitter_mac">Tag Mac</option>
<option value="tag_number">Tag Number</option>
<option value="sub_category">Sub Category</option>
<option value="name">Department Name</option>
<option value="in_time">In Time</option>
<option value="out_time">Out Time</option>
</select>
</td>
<td>
<input class="form-control searchItem" placeholder="Enter Search item" name="searchItem" />
<!-- <input type="hidden" name="counterValue" id="counterValue" value=""> -->
</td>
</tr>
</tbody>
</table>
JavaScript
function cloneRow() {
counter++;
if (counter >= 7) {
return;
} else {
var a = $("table#table").find("tbody");
var b = a.find("tr:first");
$trLast1 = a.find("tr:last");
$trNew = b.clone();
$trNew.find("button#dltbtn").remove().end();
$trNew.find("td:first").append('<button type="button" class="btn btn-plus custom-icon glyphicon glyphicon-minus" onclick="deleteRow(this);" title="Remove Row"></button>');
$trLast1.after($trNew);
}
}
function deleteRow(a) {
$(a).closest("tr").remove();
counter--;
}
解决方案
var rowCount = 1;
function cloneRow(self) {
if(rowCount==7){
$(".glyphicon-plus").attr("disabled", true);
return;
}
else{
var a = $("table#table").find("tbody");
var b = a.find("tr:first");
$trLast1 = a.find("tr:last");
$trNew = b.clone();
$trNew.find("button#dltbtn").remove().end();
$trNew.find("td:first").append('<button type="button" class="btn btn-plus custom-icon glyphicon glyphicon-minus" onclick="deleteRow(this);" title="Remove Row"></button>');
$trLast1.after($trNew);
rowCount = $('table#table tr:last').index() + 1;
manage_opns();
}
}
$(document).on('change', '.selectedItem', function(e, el){
manage_opns();
});
function manage_opns(){
$("select.selectedItem option").attr('disabled',false);
$("select.selectedItem").each(function(i, el){
var cur_val = $(el).val();
if(cur_val != ''){
$("select.selectedItem option[value='"+cur_val+"']").attr('disabled',true);
$(el).find("option[value='"+cur_val+"']").attr('disabled',false);
}
});
}
function deleteRow(a) {
$(a).closest("tr").remove();
rowCount = $('table#table tr:last').index() + 1;
if(rowCount <= 7){
$(".glyphicon-plus").attr("disabled", false);
}
manage_opns();
}
HTML Code
<table class="table table-bordered centeredContent" id="table">
<tbody>
<tr>
<td><button type="button" class="btn btn-plus custom-icon glyphicon glyphicon-plus" onclick="cloneRow(this);" title="Add Row"></button>
</td>
<td>
<select class="selectedItem required-report input-normal input-width-45" name="selectedItem">
<option value="entityName">Entity Name</option>
<option value="transmitter_mac">Tag Mac</option>
<option value="tag_number">Tag Number</option>
<option value="sub_category">Sub Category</option>
<option value="name">Department Name</option>
<option value="in_time">In Time</option>
<option value="out_time">Out Time</option>
</select>
</td>
<td>
<input class="searchItem input-normal input-width-45 required-report" placeholder="Enter Search item" name="searchItem"/>
</td>
</tr>
</tbody>
</table>
Now you can see the functionality
这篇关于我如何使用JQuery删除和添加动态创建的下拉列表中的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
