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>

<强> DEMO2

$('.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。然后使用我展示的过程追加它

＆＃13;

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

＆＃13;

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

＆＃13;

如何在选择器中添加/删除选项？

2 个答案: