Removing multiple select option from drop down

Question

Does anyone knows how to remove multiple options from form drop down? I want to read data from database, and depending on its value remove some options.

<select name="year">
    <option value="1">First year/option>
    <option value="2">Second year</option>
    <option value="3">Third year</option>
</select>

After I read data from the database, I would like to remove some values based on the data's value. So if the data value is 3, I want to remove values 1 and 2 from thr drop down list..

you need to dynamically generate your form in a `while` loop while fetching data from db — Fabio, Apr 15 '13 at 11:07

Adil · Accepted Answer · 2013-04-15T11:42:17.217

1

You can use filter() to filter out elements on custom conditions.

Live Demo

$('[name=year] option').filter(function(){
    return this.value != '3'
}).remove();

or

Live Demo

$('select :not(option[value=3])').remove();

Edit based on comments, to filter elements have values less then given value.

Use < operator instead of == then and treat the value as number instead of string,

$('[name=year] option').filter(function(){
    return parseInt(this.value) < 3
}).remove();

edited Apr 15 '13 at 11:42

answered Apr 15 '13 at 11:10

Adil

146,340
25
209
204

Tnx this helped me, but I forgot to ask in question: If the value from db was 2, i want to remove value 1. So i want to remove lower values then the value from database. – Ivan Pandžić Apr 15 '13 at 11:23
Use < operator instead of == then and treat the value as number instead of string., return parseInt(this.value) < 3 – Adil Apr 15 '13 at 11:35

score 0 · Answer 2 · answered Apr 15 '13 at 11:08

All you have to do is have 2 sections of the same dropdown box. Inside the sections you need to dynamically generate the options omitting the ones which you do not need.

   if($data_from_db){
      <select name="year">
       <option value="1">First year/option>
       <option value="2">Second year</option>
      </select>
   }
   else{
     <select name="year">
       <option value="1">First year/option>
       <option value="2">Second year</option>
       <option value="3">Third year</option>
     </select>
   }

score 0 · Answer 3 · answered Apr 15 '13 at 11:10

0

You can use something like this

$("select option[value!='3']").remove();

answered Apr 15 '13 at 11:10

JackPoint

4,031
1
30
42

Removing multiple select option from drop down

3 Answers3