如何使用 JQuery 在动态创建的下拉列表中删除和添加值？答案

【问题标题】：how do i remove and add value in dynamic created dropdown using JQuery?如何使用 JQuery 在动态创建的下拉列表中删除和添加值？
【发布时间】：2017-03-24 18:32:54
【问题描述】：

我的要求是：

1 - 如果我从下拉列表中选择任何选项，则它不应显示在除当前选项之外的任何其他下拉列表中。

2 - 如果我将上面选择的选项更改为其他选项，则之前选择的选项应在所有下拉列表中再次显示（添加），并且应从所有其他下拉列表中删除新选项。

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--;
}

【问题讨论】：

我在您的 HTML 中没有看到 ID 为 dltbtn 的按钮元素。

标签： javascript jquery html jquery-ui html-select

【解决方案1】：

确定您要做什么有点困难。我在这里试了一下。

示例：https://jsfiddle.net/Twisty/1L152xyj/

JavaScript

function cloneRow($obj) {
  $obj = $obj.length ? $obj : $("#table tbody");
  counter++;
  if (counter >= 7) {
    $(".btn-plus").button("disable");
    return;
  } else {
    var b = $obj.find("tr:first");
    $trLast1 = $obj.find("tr:last");
    $trNew = b.clone();
    $trNew.find(".btn-plus").remove();
    $trNew.find("td:first").append($("<button>", {
      type: "button",
      class: "btn btn-minus custom-icon glyphicon glyphicon-minus",
      title: "Remove Row"
    }).button({
      icon: "ui-icon-minus"
    }).click(function() {
      deleteRow(this);
    }));
    $trLast1.after($trNew);
  }
}

function deleteRow(a) {
  $(a).closest("tr").remove();
  $(".btn-plus").button("enable");
  counter--;
}

var counter = 0;

$(function() {
  $(".btn-plus").button({
    icon: "ui-icon-plus"
  });
  $(".btn-plus").click(function() {
    cloneRow($("#table tbody"));
  });
});

希望对您有所帮助。

更新

我认为这可能更接近您所描述的。请发表评论并告诉我。

https://jsfiddle.net/Twisty/1L152xyj/6/

HTML 片段

    <tr id="row-1">
      <td>
        <button type="button" class="btn btn-plus custom-icon glyphicon glyphicon-plus" 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>
**JavaScript

JavaScript

function cloneRow($obj) {
  $obj = $obj.length ? $obj : $("#table tbody");
  counter++;
  if (counter >= 7) {
    $(".btn-plus").button("disable");
    return;
  } else {
    var selectIndex = $obj.find("tr:first option:selected").index();
    var b = $obj.find("tr:first");
    $trLast1 = $obj.find("tr:last");
    $trNew = $("<tr>", {
      id: "row-" + counter
    });
    b.find("td").each(function() {
      $(this).clone().appendTo($trNew);
    });
    $trNew.find(".btn-plus").remove();
    $trNew.find("td:first").append($("<button>", {
      type: "button",
      class: "btn btn-minus custom-icon glyphicon glyphicon-minus",
      title: "Remove Row"
    }).button({
      icon: "ui-icon-minus"
    }).click(function() {
      deleteRow(this);
    }));
    $trNew.find("select")
      .attr("id", "selectedItem_" + counter)
      .find("option").eq(selectIndex).prop("selected", true);
    $trLast1.after($trNew);
  }
}

function deleteRow(a) {
  $(a).closest("tr").remove();
  $(".btn-plus").button("enable");
  counter--;
}

var counter = 1;

$(function() {
  $(".btn-plus").button({
    icon: "ui-icon-plus"
  });
  $(".btn-plus").click(function() {
    cloneRow($("#table tbody"));
  });
});

这会克隆所有内容，但会更新 id 属性以确保它们是唯一的。它还会克隆选项的选定属性。

更新 2

如果你想禁用一个选项，当克隆行时，可以这样做：

$trNew.find("select")
  .attr("id", "selectedItem_" + counter)
  .find("option").eq(selectIndex).prop("disabled", true);

示例：https://jsfiddle.net/Twisty/1L152xyj/7/

更新 3

如果您不希望此选项出现在其他 select 元素中，并且在第一个选择更改时也被删除，您必须做更多的事情。我建议存储选项列表：

var options = [{
  value: "entityName",
  label: "Entity Name",
}, {
  value: "transmitter_mac",
  label: "Tag Mac"
}, {
  value: "tag_number",
  label: "Tag Number"
}, {
  value: "sub_category",
  label: "Sub Category"
}, {
  value: "name",
  label: "Department Name"
}, {
  value: "in_time",
  label: "In Time"
}, {
  value: "out_time",
  label: "Out Time"
}];

通过这种方式，您可以随时添加、删除或更改选项。一个简单的函数可以帮助解决这个问题：

function replaceSelect($target, key) {
  $target.find("select").find("option").remove();
  $.each(options, function(k, v) {
    if (key !== k) {
      $target.find("select").append($("<option>", {
        value: v.value
      }).html(v.label));
    }
  });
}

工作示例：https://jsfiddle.net/Twisty/1L152xyj/8/

【讨论】：

我的要求是： 1 - 如果我从下拉列表中选择任何选项，则它不应显示在除当前下拉列表之外的任何其他下拉列表中。 2 - 如果我将上面选择的选项更改为其他选项，那么之前选择的选项应该在所有下拉列表中再次显示（添加），并且应该从所有其他下拉列表中删除新选项。
可以的。这将需要一些工作。在我的更新中有一个提示。到目前为止，您尝试过什么？
你看过我的要求了吗？我认为您给出了不同的答案，我期待其他一些功能。看过 jsfiddle 演示，假设我在第一个下拉列表中选择 entityName，那么应该在下次创建的任何下拉列表中禁用实体名称...请再次查看。
我确实阅读了您的要求，但并不清楚。我不明白目标。请查看：jsfiddle.net/Twisty/1L152xyj/7克隆时，可以将disabled设置为true：.find("option").eq(selectIndex).prop("disabled", true);
感谢 Twisty 的回复，看看我自己给出的答案

【解决方案2】：

        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 代码

<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>

现在你可以看到功能了

【讨论】：