Question

我有三个标记为主题选择1，主题选择2和主题选择3的下拉列表。只有在加载网页时填充第一个主题列表。如何在更改第二个列表时更改第一个和第三个列表时填充第二个列表？另一个要求是每个要填充的列表应该是互斥的。

让我们举一个例子：最初第二个列表和第三个列表是无效的。说第一个列表包含：

孟加拉语
英
数学
物理
化学

现在用户选择说3）数学，然后第二个列表将是

孟加拉语
英
物理
化学

这次如果用户选择说2），那么第三个列表将是

孟加拉语
物理
化学

我正在寻找使用纯JavaScript或jQuery完成的所有事情，如果绝对需要，但没有数据库交互。

                    <!-- 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

请参阅以下代码。这不是一个非常优雅的方法，但它工作正常。我已经为第二个下拉列表实现了它，你也可以为第三个下拉列表实现类似的。

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

这里可以通过一般性/动态驱动很多东西，避免使用硬代码。

希望这有帮助

如何从javascript中的另一个下拉列表中填充下拉列表，不包括任何一个选项？

1 个答案: