Jquery remove all options from select list except some specific-CodePudding

we have a select list:

<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>

Also we have a hidden input that value take dynamically multiple values using a jquery function.(3325,3326,3323,3322)

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

What we want to do is to keep in the select dropdown only the options that exist in input type hidden (3325,3326,3323,3322) and remove all the others.

Any ideas? Any code about it?

We have tried using this example: https://www.w3resource.com/jquery-exercises/part1/jquery-practical-exercise-15.php

and we have managed to remove all values on click event.

but how we remove everything except 3325,3326,3323,3322 ??

CodePudding user response：

I would do this by first hiding all options:

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

and after that show the options I want. For instance, if you want number 3118, you do:

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

Can you work it out from here?

CodePudding user response：

You could try below code.

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();
    }
});

It should be remove each data that has no reference in hidden select

CodePudding user response：

You can try this code:

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();

It splits the hidden input’s value attribute into an array, gets all options, filters out options that should be kept, and removes the rest.