有什么方法可以处理选项的索引吗?
Is there any way to work with index of an option?
我想添加删除 'option1' 并使用 jQuery 在同一位置附加另一个选项:
假设我的选择是:
<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>
在我的例子中,它可以删除该选项,但将其附加到最后一个位置。
有什么方法可以使用索引吗?
您可以参考下面的代码,这里我在底部动态删除和添加选项,但是您可以使用选项索引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>
.replaceWith() 对我有用。谢谢
我想添加删除 'option1' 并使用 jQuery 在同一位置附加另一个选项: 假设我的选择是:
<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>
在我的例子中,它可以删除该选项,但将其附加到最后一个位置。 有什么方法可以使用索引吗?
您可以参考下面的代码,这里我在底部动态删除和添加选项,但是您可以使用选项索引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>
.replaceWith() 对我有用。谢谢