有什么方法可以使用选项的索引吗？

Question

我想使用jQuery添加、删除'option1‘并在相同位置追加另一个选项:假设我的选项是：

​

<select id="selectBox" name="selectBox">
  <option value="option"> option1 </option>
  <option value="option2"> option2 </option>
  <option value="option3"> option3 </option>
  <option value="option4"> option4 </option>
</select>

​

在我删除并追加后，我想要如下选项：

​

<select id="selectBox" name="selectBox">
  <option value="myoption"> myoption </option>
  <option value="option2"> option2 </option>
  <option value="option3"> option3 </option>
  <option value="option4"> option4 </option>
</select>

​

我的脚本是：

​

$("#selectBox option[value='option1']").remove();
$("#selectBox").append('<option value="myoption">myoption </option> ');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectBox" name="selectBox">
  <option value="option"> option1 </option>
  <option value="option2"> option2 </option>
  <option value="option3"> option3 </option>
  <option value="option4"> option4 </option>
</select>

​

在我的例子中，它可以删除选项，但将其追加到最后一个位置。有什么方法可以使用索引吗？

Answer 1

.replaceWith()适合我。谢谢

Answer 2

你可以从下面的代码中引用，这里我在底部动态删除和添加选项，但你可以使用选项索引select.options[select.options.length] = new Option('New Element', '0');在任何地方添加，只需将select.options.length替换为索引：

​

function addOption(){
	var select = document.getElementById("dynamic-select");
	select.options[select.options.length] = new Option('New Option', '0');
}

function removeOption(){
	var select = document.getElementById("dynamic-select");
	select.options[select.options.length - 1] = null;
}

function removeAllOptions(){
	var select = document.getElementById("dynamic-select");
	select.options.length = 0;
}

<select id="dynamic-select">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

<button onclick="addOption()">add item</button>
<button onclick="removeOption()">remove item</button>
<button onclick="removeAllOptions()">remove all</button>

​