CODEWITHSUNDEEP
javascriptjquery
Arunaa Periaswamy
Arunaa Periaswamy

Reputation: 59

Dropdown values in jquery

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?

Upvotes: 2

Views: 144

Answers (4)

RGR
RGR

Reputation: 1571

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

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

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

Upvotes: 2

Adil
Adil

Reputation: 148110

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

Upvotes: 6

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

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/

Upvotes: 0

Related Questions