How to Change Drop Down Menu Based on Another Drop Down Selection Using jQu

[vishalonne]

I want to give 2 option for 5th subjects depending on stream choice. Means if user select Commerce then he/she must able to select any 1 subject from drop down either IP or Other same for other streams. –

<!-- 1st select block will look like this -->
<td>Stream :
        <select name="stream">
        <option value="1">Commerce</option>
        <option value="2">Humanities</option>
        <option value="3">Sci[PCM]</option>
        <option value="4">Sci[PCB]</option>
        </select>
</td>
<!-- On Selecting the stream 5th subject will populated automatically accoring ti their respective stream which is like this -->
<td>5th Subjects :       
         <select name="5thsub">
        <option value="1">IP</option> 
        <option value="1">OTHER</option>
        <option value="2">Hindi</option> 
        <option value="2">IP</option>
        <option value="3">CS</option> 
        <option value="3">IP</option>
        <option value="4">Math</option> 
        <option value="4">Hindi</option>
        </select>
</td>
<script>
$(document).ready(function(){
var secondSelect = $("select[name='core']");
var thirdSelect = $("select[name='5thsub']");
var secondOptions = secondSelect.children('option');
var thirdOptions = thirdSelect.children('option');

$("select[name='stream']").change(function(){     
    var selectedIndex = this.selectedIndex;
    secondOptions.filter(function(i){ return i == selectedIndex})
                 .appendTo(secondSelect.empty());
    thirdOptions.filter(function(i){ return i == selectedIndex})
                 .appendTo(thirdSelect.empty());
}).change();
});
</script>

I am trying to achive the result by using this code but I am getting only 1 item in 2nd drop down and according to the index number of item of 1st drop down. Means if I select Commerce I get IP is 2nd drop down, if I select Humanity I get Other.
Where as I should get IP and Other for Commerce from where I can select any 1 of the subject.

[diafol]

Is this data being fetched via ajax or is it stored in a json structure (or both!)?

[vishalonne]

@diafol No data is not stored any where it is simple HTML inside Select option tag (as shown above) and data will be fetch by jquery (ajax)

[vishalonne]

@diafol OR if you can guide me

var data = {
        'Samsung': {
            'Samartphones': ["Galaxy S4", "Galaxy Note 2", "Galaxy S3", "Galaxy Tab 3"],
            'Budget Phones': ["Wave 525", "Galaxy Grand", "Corby"]
        },
        'Nokia': {
            'Smartphones': ["Lumia 920", "Lumia 820", "Lumia 1020"],
            'Budget Phones': ["Asha 300", "Asha 303", "Asha 309"]
        }

In above code 3 dimension array is used for displaying 3 level of drop down like this
Sumsung -> Samartphones -> "Galaxy S4", "Galaxy Note 2", "Galaxy S3", "Galaxy Tab 3"
Sumsung -> Samartphones -> "Wave 525", "Galaxy Grand", "Corby"

I just need 2 level of drop down how can use the above array for my need like this
Science -> CS, IP
Commerce -> IP, Other
Humanity -> Hindi, IP

[diafol]

You need id values to go with these. If you're using ajax, then I'm assuming that you need to refer to 'records' in a DB or in XML. Even if you're just using json as a data store, I would imagine that you'd need some way of identifying an item (as in your arrays). javascript does not support associative keys, so storing items in an array is tricky.