javascript - jQuery selectize 选择删除并添加按钮单击选项

Question

我在选择框上使用了 Selectize。

我试图在通过单击外部按钮选择选项时删除该选项。同样，单击外部删除按钮后，该选项应返回到列表。

我尝试过使用 Selectize 提供的选项进行实验，但鉴于我的情况，我发现自己无法解决该问题

请看一下我的代码:Fiddle

$(function(){
  $('#tax-statelist').selectize();

$('body').on('click', '#addSalesTaxState', function() {


var selectedState = $('#tax-statelist').val();

var selectedStateText = $('#tax-statelist option:selected').text();

if(selectedState != 'default') {
  var stateTax="";

stateTax += "<div class=\"commonclass-flex bottomspace1\">";
stateTax += "                         <input class=\"selectedStateText\" type=\"hidden\" value="+selectedStateText+" name=stateText[] \/>";
stateTax += "                         <input class=\"selectedStatePrefix\" type=\"hidden\" value="+selectedState+" name=stateprefix[] \/>";
stateTax += "                         <label class=\"rightspace1\">"+selectedState+"<\/label>";
stateTax += "                         <input class=\"inputstyle3\" name=statetaxvalue[] type=\"text\" value=\"\" required\/>";
stateTax += "                         <span>%<\/span>";
stateTax += "                         <div class=\"salestax-stateremove\"><button type=\"button\" class=\"removestatetax button-resets tooltip\" title=\"Remove State\"><\/button><\/div>";
stateTax += "                       <\/div>";

$('#createnew--salestax-per').append(stateTax)
$('#tax-statelist').val('default').trigger('change');
}
});

$('body').on('click', '.removestatetax', function() {
  $(this).parent().parent().remove();
});  

});

Answer 1

这都是因为你正在使用的 selectize 库，如果你要插入、删除和类似的东西，你应该通过 selectize 库 api 使用它。无论如何，我评论了您的选择库，并修复了您的代码，使其在没有它的情况下也能工作，并且状态在被选择时将被隐藏，并且当它们从列表中删除时将再次显示。 Fiddle

$(function() {
  //$('#tax-statelist').selectize();

  $('body').on('click', '#addSalesTaxState', function() {


    var selectedState = $('#tax-statelist').val();

    var selectedStateText = $('#tax-statelist option:selected').text();
    $('#tax-statelist option:selected').hide();
    $('#tax-statelist').val('default');

    //$('#tax-statelist option:selected').hide();
    if (selectedState == null) {
      alert("pls select one the states first!");
      return;
    }

    if (selectedState != 'default') {
      var stateTax = "";

      stateTax += "<div class=\"commonclass-flex bottomspace1\">";
      stateTax += "                         <input class=\"selectedStateText\" type=\"hidden\" value=" + selectedStateText + " name=stateText[] \/>";
      stateTax += "                         <input class=\"selectedStatePrefix\" type=\"hidden\" value=" + selectedState + " name=stateprefix[] \/>";
      stateTax += "                         <label class=\"rightspace1\">" + selectedState + "<\/label>";
      stateTax += "                         <input class=\"inputstyle3\" name=statetaxvalue[] type=\"text\" value=\"\" required\/>";
      stateTax += "                         <span>%<\/span>";
      stateTax += "                         <div class=\"salestax-stateremove\"><button type=\"button\" class=\"removestatetax button-resets tooltip\" title=\"Remove State\"><\/button><\/div>";
      stateTax += "                       <\/div>";

      $('#createnew--salestax-per').append(stateTax)
        //$('#tax-statelist').val('default').trigger('change');
    }
  });

  $('body').on('click', '.removestatetax', function() {
    $(this).parent().parent().remove();
    var op_val = $(this).parent().parent().find('.rightspace1').html();
    $('#tax-statelist option[value=' + op_val + ']').show();
    $('#tax-statelist').val(op_val);
  });

});

.salestax-stateremove button {
  border: none;
  outline: none;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  background: url(http://cortechindia.com/wip/lag/images/icon_salestax-remove.png) no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="tax-statelist" placeholder="Choose State...">
    <option disabled value="default">Choose State...</option>
    <option value="AA">APO/FPO AA</option>
    <option value="AP">APO/FPO AP</option>
    <option value="AE">APO/FPO AE</option>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
    <option value="AS">American Samoa</option>
    <option value="GU">Guam</option>
    <option value="MP">Northern Mariana Islands</option>
    <option value="PR">Puerto Rico</option>
    <option value="UM">United States Minor Outlying Islands</option>
    <option value="VI">Virgin Islands</option>
  </select>
</div>
<div id="createnew--addnewstate" class="leftspace1">
  <button id="addSalesTaxState" class="button-resets actions-button__text actions-button-addstate">Add</button>
</div>

<div id="createnew--salestax-per">

</div>