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

Question

我的要求是：

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

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

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

现在您可以看到功能