how do i remove and add value in dynamic created d

2019-06-06 15:32发布

站内文章 / JavaScript
24 0 0

问题:

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

回答1:

It's a bit hard to determine what you're trying to do. I took a stab at it here.

Example: 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"));
  });
});

Hope that helps.

Update

I think this might be closer to what you were describing. Please comment and let me know.

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

HTML Snippet

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

This clones everything but updates the id attributes to ensure they are unique. It also clones the selected property of the option.

Update 2

If you want to disable an option, when the row is cloned, that can be done like so:

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

Example: https://jsfiddle.net/Twisty/1L152xyj/7/

Update 3

If you do not want this option to appear in the other select elements and also be removed whenever the first select is changed, you have to do a lot more. I would advise storing a list of the options:

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

This way you can add, remove, or change options at any time. A simple function can help with this:

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

Working Example: https://jsfiddle.net/Twisty/1L152xyj/8/



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



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

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~