Dropdown values in jquery

Question

I have a two dropdown's with the list of items 2 and 6 respectively. When i select first dropdown item, the list of items in second one will be 6 and when i select other value in first dropdown, the list of items should be 5 in second dropdown,

Please find the code here:

<select id="firstdropdown">
    <option value="1">Test</option>
    <option value="2">Testing</option>
</select>
<select id="seconddropdown">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    <option value="4">test4</option>
    <option value="5">test5</option>
    <option value="6">test6</option>
</select>

Can anyone suggest me a solution in jquery or javascript?

Do you mean you want to select the items with values 5 or 6, or you want there to be 5 or 6 items available in the second select? Your question is not clear. Also, SO questions should include any code you have written yourself to find a solution. — Rory McCrossan
– Rory McCrossan, Commented Dec 14, 2012 at 10:16
When i select 'Test' all the values in second dropdown should be listed and when i select 'Testing', only 5 values should be listed in second dropdown — Arunaa Periaswamy
– Arunaa Periaswamy, Commented Dec 14, 2012 at 11:06

Adil · Accepted Answer · 2012-12-14 10:18:26Z

6

You can do this way, I assumed you want to show / hide last item. you can change it to your desired by giving index.

Live Demo

$('#firstdropdown').change(function(){
    if($(this).val() == "2")
        $('#seconddropdown option:eq(5)').hide();
    else
        $('#seconddropdown option:eq(5)').show();
});

answered Dec 14, 2012 at 10:18

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arunaa Periaswamy Over a year ago

Thanks. But i could not find any difference. I need to hide the 3rd item in the list, when i select the other item value in the first dropdown. Suggest me a solution to this.

Murali Murugesan · Accepted Answer · 2012-12-14 10:18:45Z

2

From my understanding you are removing a item for a second option of first drop down

 $("#firstdropdown").change(function() {
    if(this.value === "2") $("#seconddropdown option:last").remove();
    //here you are just removing last item    
})

answered Dec 14, 2012 at 10:18

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

Comments

Samuel Caillerie · Accepted Answer · 2012-12-14 10:17:29Z

0

Something like this :

$("#firstdropdown").change(function() {
    if(this.value === "1") $("#seconddropdown").val("6");
    else $("#seconddropdown").val("5");
})

EDIT : added a jsfiddle : http://jsfiddle.net/scaillerie/WGhLA/

answered Dec 14, 2012 at 10:17

Samuel Caillerie

8,2652 gold badges29 silver badges34 bronze badges

1 Comment

A. Wolff Over a year ago

I think OP wants list of 6 items or 5 items for seconddropdown

RGR · Accepted Answer · 2012-12-14 11:24:49Z

0

If you need to hide any item in the dropdown, you just need to change the index of 'eq'

 $('#firstdropdown').change(function(){
     if($(this).val() == "2")
        $('#seconddropdown option:eq(3)').hide(); // change the index of 'eq' 
     else
        $('#seconddropdown option:eq(3)').show();
  });

answered Dec 14, 2012 at 11:24

RGR

1,5812 gold badges23 silver badges38 bronze badges

1 Comment

Arunaa Periaswamy Over a year ago

Thanks. But this code does not works for me.Suggest me some solution

Collectives™ on Stack Overflow

Dropdown values in jquery

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related