如何在javascript中的另一个下拉列表中填充排除任何一个选项的下拉列表？

Question

I have three drop down lists labelled as Subject Choice 1, Subject Choice 2 and Subject Choice 3. Only the first Subject list is populated upon the web page loading. How can I populate the second list on changing the first and the third list on changing the second list? Also another requirement is that each list to be populated should be mutually exclusive.

Lets have an example: initially the Second list and Third List are void. Say The first list contains:

1. Bengali
2. English
3. Mathematics
4. Physics
5. Chemistry

Now the user selects say 3) Mathematics, then the second list will be

1. Bengali
2. English
3. Physics
4. Chemistry

This time if the user selects say 2), then the third list will be

1. Bengali
2. Physics
3. Chemistry

I am looking for the whole thing to be done using pure JavaScript or jQuery if absolutely needed, but no database interaction.

                    <!-- javascript code for dynamic dropmenu For Hons 2 Subject -->
                    function AjaxFunctionHonsSub2(hons_sub_id2)
                    {

                    var httpxml;
                    try
                      {
                      // Firefox, Opera 8.0+, Safari
                      httpxml=new XMLHttpRequest();
                      }
                    catch (e)
                      {
                      // Internet Explorer
                              try
                                        {
                                     httpxml=new ActiveXObject("Msxml2.XMLHTTP");
                                        }
                                catch (e)
                                        {
                                    try
                                {
                                httpxml=new ActiveXObject("Microsoft.XMLHTTP");
                                 }
                                    catch (e)
                                {
                                alert("Your browser does not support AJAX!");
                                return false;
                                }
                                }
                      }
                    function stateck() 
                        {
                        if(httpxml.readyState==4)
                          {

                    var myarray=eval(httpxml.responseText);

                    // Before adding new we must remove previously loaded elements

                    for(j=document.applicationform.hons_pref_sub3.options.length-1;j>=0;j--)
                    {
                    document.applicationform.hons_pref_sub3.remove(j);
                    }

                    // add option for subject 3
                    var index=0;
                    var optn2 = document.createElement("OPTION");
                    optn2.value = '19';
                    optn2.text = '------SELECT------';
                    document.applicationform.hons_pref_sub3.options.add(optn2);
                    for (i=0;i<myarray.length;i++)
                    {
                        if(index<myarray.length){
                            var optn = document.createElement("OPTION");
                            optn.value = myarray[index];
                            optn.text = myarray[index+1];
                            document.applicationform.hons_pref_sub3.options.add(optn);
                            index+=2;
                            }
                    } 

                          }
                        }
                    var url="fetch_hons_subject.php";
                    url=url+"?hons_sub_id="+hons_sub_id2;
                    url=url+"&sid="+Math.random();
                    httpxml.onreadystatechange=stateck;
                    httpxml.open("GET",url,true);
                    httpxml.send(null);
                      }
                    <!--# end javascript code for dynamic dropmenu ======================================================================-->

Answer 1

Please see the following code. It is not a very elegant approach but it works fine. I have implemented it for the second dropdown, you can implement similarly for the third dropdown as well.

<html>
<head>
<script>
function changeDD2()
{   
    var ddTemp = document.getElementById('mydropdown');
    var dd2Temp = document.getElementById('mydropdown2');
    var ddSelectedIndex = ddTemp.selectedIndex;
    if(ddSelectedIndex==0)
    {
        alert("Please select valid input");
        return;
    }
    else
    {
        for(var i=1;i<ddTemp.length;i++)
        {
            if(i!=ddSelectedIndex)
            {
                var opt = ddTemp[i];
                var el = document.createElement("option");
                el.textContent = opt.text;
                el.value = opt.value;
                dd2Temp.appendChild(el);
            }
        }
    }
}
</script>
</head>
<body>
<select id="mydropdown" name = "mydropdown" onChange="changeDD2()">
    <option>None</option>
    <option>Maths</option>
    <option>Bio</option>
    <option>Physics</option>
    <option>Chemistry</option>
</select>
<select id="mydropdown2" name = "mydropdown2">
</select>
<select id="mydropdown3" name = "mydropdown3">
</select>
</body>
</html>

A lot of things could be generically/dynamically driven here avoiding the use of the hard code.

Hope this helps