如何在选择器中添加/删除选项？ [复制]

Question

如何在选择器中添加或删除选项，我有这样的选择器：

<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

我想要添加一个添加按钮和一个删除按钮。

添加按钮可以添加一个新选项，如果我选择一个选项，我可以按下删除以自动删除它

$('select[name=things]').change(function() {
  if ($(this).val() == '') {
    var newThing = prompt('Enter a name for the new thing:');
    var newValue = $('option', this).length;
    $('<option>')
      .text(newThing)
      .attr('value', newValue)
      .insertBefore($('option[value=]', this));
    $(this).val(newValue);
  }
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="things">
    <option value="1">Thing One</option>
    <option value="2">Thing Two</option>
    <option value="3">Thing Three</option>
    <option value="">New Thing&hellip;</option>
</select>

这可能对我有用，但我希望在 + 按钮和删除按钮上添加新事物。

你们觉得呢？

Answer 1

第一个问题是您需要将"" 添加到[value=] 所以它将是[value=""]

我还添加了一个删除按钮。 （不确定这是否是您想要的方式，但它可能会对您有所帮助）

演示

$('select[name=things]').change(function() {
  if ($(this).val() == '') {
    var newThing = prompt('Enter a name for the new thing:');
    var newValue = $('option', this).length;
    $('<option>')
      .text(newThing)
      .attr('value', newValue)
      .insertBefore($('option[value=""]', this));
    $(this).val(newValue);
  }
});

$(".rOption").click(function() {
  var v = $("select[name=things]").val();
  if (v != null) {
    $("select[name=things] option:selected").remove();
  }
})

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="things">
    <option value="1">Thing One</option>
    <option value="2">Thing Two</option>
    <option value="3">Thing Three</option>
    <option value="">New Thing&hellip;</option>
</select>

<button class="rOption">Remove option</button>

演示2

$('.addOption').click(function() {
  var obj = $('select[name="things"]')
  var newThing = prompt('Enter a name for the new thing:');
  var newValue = $('option', obj).length;
  $('<option>')
    .text(newThing)
    .attr('value', newValue)
    .insertAfter($('option:last', obj));
  obj.find('option').last().prop('selected',true);
});

$(".rOption").click(function() {
  var v = $("select[name=things]").val();
  if (v != null) {
    $("select[name=things] option:selected").remove();
  }
})

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select name="things">
    <option value="1">Thing One</option>
    <option value="2">Thing Two</option>
    <option value="3">Thing Three</option>
</select>

<button class="addOption">+</button>
<button class="rOption">-</button>

Answer 2

试试这个。首先将 ID 放在您的下拉列表中。然后使用我展示的过程附加它

for($x = 2; $x < 4; $x++){
  $('#mySelect').append($('<option>', {
    value: $x,
    text: $x
  }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <select id="mySelect">
  <option value ="1"> 1</option>
  </select>