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

Posted 2023-02-16

【中文标题】如何在选择器中添加/删除选项？ [复制]

【英文标题】：How can I add/remove Options in a Selector? [duplicate]

【发布时间】：2018-03-16 17:02:00

【问题描述】：

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

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

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

你们觉得呢？

【参考方案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>

【讨论】：

这很好，但我该如何做新事物部分？把它从选项中去掉，让它像一个 + 按钮？当我按下它时，弹出窗口会出现我添加文本并按确定并将其添加到选择器

@AndreiRef 检查演示 2

你知道为什么当我创建选项并选择它以将其添加到表 TD 中。如果我添加了 5 个选项并选择第二个。它将数字 2 放在 TD 中，而不是 Option 包含的内容

@AndreiRef 我猜是因为您插入了选项的值，请尝试使用 .text()

让我们continue this discussion in chat.

【参考方案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>

【讨论】：

这如何适用于 OP 的问题/问题？

@CarstenLøvboAndersen 它是选择器上的基本选项。它表明您可以使用变量将任何值添加到选项框。从那里他可以得出他将如何传递选项的值和文本