如何使用 JavaScript 刪除 div 元素內的下拉列表中的元素

Question

I want to remove elements in a dropdown, the example of the HTML code is below and I need to select elements by div class "woo-vpf-field-make" then select the name "make" and then option value "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() function 來搜索刪除它的值

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

或者您可以為您的 select 分配一個 ID，這樣更容易找到

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