Jquery 從 select 列表中刪除所有選項，除了一些特定的

Question

我們有一個 select 列表：

<select placeholder="cars" data-name="cars" name="datetime[0][cars]" id="datetime_0_cars" multiple="multiple" value="">
             <option value="3326">Παραποτάμιο Πάρκο</option>
             <option value="3325">Ναός Μαξίμου του Γραικού</option>
             <option value="3324">Αρχαιολογικό Μουσείο Άρτας</option>
             <option value="3323">Δυτική Νεκρόπολη Αρχαίας Αμβρακίας</option>
             <option value="3322">Μικρό Θέατρο Αμβρακίας</option>
             <option value="3321">Ναός Αγίας Παρασκευή του Δράκου</option>
             <option value="3320">Ναός Παναγίας Παντάνασσας</option>
             <option value="3319">Ναός Αγίου Βασιλείου</option>
             <option value="3318">Κούλια (Φρούριο) Κορωνησίας</option>
             <option value="3317">Ναός Παναγιάς της Ροδιάς</option>
             <option value="3316">Ναός Αγίου Νικολάου της Ροδιάς</option>
             <option value="3315">Ναός Αγίου Δημητρίου Κατσουρή</option>
             <option value="3314">Ιερά Μονή Κάτω Παναγιάς</option>
             <option value="3313">Πολυάνδριο της Αμβρακίας</option>
             <option value="3312">Ναός Αγίας Παρασκευής</option>
             <option value="3311">Ναός Αγίου Βασιλείου</option>
             <option value="3310">Ναός Αγίας Θεοδώρας</option>
             <option value="3309">Κάστρο Άρτας</option>
             <option value="3308">Ναός Γενεσίου της Θεοτόκου Κορωνησίας</option>
             <option value="3307">Ναός Παναγίας Βλαχέρνας</option>
             <option value="3299">Ναός Παναγίας Παρηγορήτισσας</option>
             <option value="3250">Ιστορικό Γεφύρι της Άρτας</option>
             <option value="3249">Οικία Ζορμπά</option>
             <option value="3248">Φεϊζούλ Τζαμί</option>
             <option value="3247">Τζαμί Φαϊκ Πασά (Ιμαρέτ)</option>
             <option value="3246">Μονοπάτι της Βίδρας</option>
             <option value="3245">Πάρκινγκ (οδός Αράχθου)</option>
             <option value="3244">Πάρκινγκ (Εκθεσιακό Κέντρο)</option>
             <option value="3243">Πάρκινγκ (Πλατεία Ναπολέοντα Ζέρβα)</option>
             <option value="3242">Πλατεία Κρυστάλλη</option>
             <option value="3241">Πλατεία Παμμεγίστων Ταξιαρχών</option>
             <option value="3240">Τουριστικό Περίπτερο</option>
             <option value="10433">Αθλητικό Κέντρο</option>
             <option value="3239">Περιαστικό Δάσος Άρτας</option>
             <option value="3237">Δημοτικό Στάδιο</option>
             <option value="3132">Κορωνησία</option>
             <option value="3130">Εκθεσιακό Κέντρο</option>
             <option value="3129">Δημοτική Πινακοθήκη</option>
             <option value="3128">Δημοτική Βιβλιοθήκη</option>
             <option value="3127">Πανεπιστήμιο Ιωαννίνων Βιβλιοθήκη Παραρτήματος Άρτας</option>
             <option value="3126">Πλατεία Κιλκίς</option>
             <option value="3125">Ιαματικά Λουτρά Χανόπουλου</option>
             <option value="3124">Πλατεία Ναπολέοντα Ζέρβα</option>
             <option value="3123">Πλατεία Καραϊσκάκη</option>
             <option value="3122">Πλατεία Εθνικής Αντίστασης</option>
             <option value="3121">Πλατεία 24ης Ιουνίου (Μονοπωλείου)</option>
             <option value="3120">Πλατεία Σκουφά</option>
             <option value="3119">Παλιά Εβραϊκή Συνοικία</option>
             <option value="3118">Μνημείο Ολοκαυτώματος</option>
             <option value="3055">Ροδαυγή</option>
  </select>

我們還有一個隱藏的輸入，該值使用 jquery function 動態取多個值。（3325,3326,3323,3322）

   <input type="hidden" name="destination_ids[]" value="3325,3326,3323,3322">

我們要做的是在 select 下拉列表中僅保留輸入類型隱藏的選項 (3325,3326,3323,3322)，並刪除所有其他選項。

有任何想法嗎？ 關於它的任何代碼？

我們嘗試使用這個例子： https://www.w3resource.com/jquery-exercises/part1/jquery-practical-exercise-15.php

我們已經設法刪除了點擊事件的所有值。

但是我們如何刪除除 3325,3326,3323,3322 之外的所有內容？

Answer 1

我會先隱藏所有選項來做到這一點：

$("select option").hide();

然后顯示我想要的選項。 例如，如果你想要數字 3118，你可以這樣做：

$("select option[value=3118]").show();

你能從這里解決嗎？

Answer 2

你可以試試下面的代碼。

var hiddenArr = $("#hidden-select option").map(function() {
    return $(this).val();
}).get();

$("#datetime_0_cars option").each(function()
{
    if($.inArray($(this).val(), hiddenArr) == -1) {
        $(this).remove();
    }
});

應該刪除隱藏 select 中沒有引用的每個數據

Answer 3

你可以試試這段代碼：

const optionsValuesToKeep = $('input[type="hidden"]').val().split(','); // is ['3325','3326','3323','3322']
$('#datetime_0_cars > option').filter( // jQuery filter not vanilla-JS filter
    (index,optionElement) => !optionsValuesToKeep.includes(optionElement.value)
).remove();

它將隱藏輸入的值屬性拆分為一個數組，獲取所有選項，過濾掉應該保留的選項，並刪除 rest。