如何使用JavaScript在div元素内部的下拉列表中删除元素

Question

我想删除下拉列表中的元素，HTML代码的示例如下，我需要通过div class"woo-vpf field make"选择元素，然后选择名称"make"，然后选择选项值"73483"。

我希望这是有道理的：(

<div class="woo-vpf-field-make">
<select name="make">
<option value="">Select Make</option>
<option value="70281">BMW</option>
<option value="73483">Fiat</option>
<option value="73923">Ford</option>
<option value="71367">Mini</option>
<option value="75988">Opel / Vauxhall</option>
<option value="74715">Volkswagen</option>                   
</select>
</div>

下面是我写的JavaScript代码，但看起来可能会更好：(

$(document).ready(function() {
$('select[name^="make"]').children("option[value^=" + "73483" + "]").remove();
$('select[name^="make"]').children("option[value^=" + "73923" + "]").remove();
$('select[name^="make"]').children("option[value^=" + "75988" + "]").remove();
$('select[name^="make"]').children("option[value^=" + "74715" + "]").remove();
})

Answer 1

您可以在数组中添加选项值。并根据数组值使用forEach删除元素

var r_arr = ["73483", "73923", "75988", "74715"];
$(document).ready(function() {
r_arr.forEach(function(value) {
$('select[name^="make"]').find("option[value^=" +value+ "]").remove();
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woo-vpf-field-make">
<select name="make">
<option value="">Select Make</option>
<option value="70281">BMW</option>
<option value="73483">Fiat</option>
<option value="73923">Ford</option>
<option value="71367">Mini</option>
<option value="75988">Opel / Vauxhall</option>
<option value="74715">Volkswagen</option>
</select>
</div>

Answer 2

为下拉分配一个id

$("#select_id option[value='73483']").remove();

Answer 3

只需使用find((函数搜索将其删除的值

$('select[name^="make"]').find("option[value^=" +value+ "]").remove();

或者你可以为你的选择分配一个Id，这样更容易找到

$("#id option[value=" +value+ "]").remove();