Question

我有一个元素列表= B.Tech。，M.Tech。，B.Sc。等等如果用户选择B.Tech。那么部门清单必须在另一个清单中打开。

但我不知道如何使用html和js。

我正在创建两个列表，无论我在上面的列表中选择什么，第二个列表都会打开它。

我的代码：

<html>
<head>
    <title> Register </title>
    <link rel="stylesheet" type="text/css" href="src/style_css/style_register.css"/>
    <script type="text/javascript" src="src/logic_js/javasc.js" >
    </script>
</head>
<body>
    <div>
        <form name="regForm" action="" method="get"><br><br>
        <table cellspacing=10 cellpadding=10 nowrap>
                <tr><td><label for="a_1"> Name </label></td>
                <td><input type="text" name="a_1" id="a_1" ></td></tr>
                <tr><td><label for="a_2"> E-mail Id</label></td>
                <td><input type="text" name="a_2" id="a_2"></td></tr>
                <tr><td><label for="a_3"> Mobile No. </label></td>
                <td><input type="text" name="a_3" id="a_3"></td></tr>
                <tr><td><label for="a_4"> Course </label></td>
                <td><select name="a_5" id="a_5">
                    <option>B.Tech.</option>
                    <option>B.Sc.</option>
                    <option>B.Com.</option>
                    <option>B.Pharm.</option>
                    <option>M.Tech.</option>
                    <option>M.Sc.</option>
                    <option>M.Com.</option>
                    <option>M.Pharm.</option>
                    </select></td></tr>
                <tr><td><label for="a_6"> Department </label></td>
                <td><script type="text/javascript">
                    function getCourse(form)
                    {
                        var chCourse=form.a_5.value;
                        if(chCourse=="B.tech")
                        {
                            </script>
                            <select name="a_6"  id="a_6" >
                                <option>C.S.E.</option>
                                <option>I.T.</option>
                                <option>M.E.</option>
                                <option>C.E.</option>
                                <option>E.E.</option>
                            </select>
                            <script>
                        }
                    }   
                    </script></tr>
                <tr><td></td><td><input type="button" name="Submit" value="Pick" onClick="getResult(this.form)"></td></tr>
        </table>
        </form>
    </div>
</body>

Answer 1

JQuery有插件来实现这一目标。它很直接。

LINK：http://www.appelsiini.net/projects/chained

在HTML中使用2个选择框。

<select id="mark" name="mark">
  <option value="">--</option>
  <option value="BTech">B Tech</option>
  <option value="MTech">M Tech</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="BTech Option 1" class="BTech">BTech Option 1</option>
  <option value="BTech Option 2" class="BTech">BTech Option 2</option>
  <option value="BTech Option 3" class="BTech">BTech Option 3</option>
  <option value="MTech Option 1" class="MTech">MTech Option 1</option>
  <option value="MTech Option 2" class="MTech">MTech Option 2</option>
  <option value="MTech Option 3" class="MTech">MTech Option 3</option>
</select>

在DOM Ready中调用加载脚本

$("#series").chained("#mark"); /* or $("#series").chainedTo("#mark"); */

小提琴：http://jsfiddle.net/kiranvarthi/xmx3vh5f/

Answer 2

您可以使用选择框的onchange属性。例如：

<select onchange="updateList()"> <option> OPtion1 </option>
         <option> OPtion2 </option>
         <option> OPtion3 </option>
<select> 

<select id="mysecondList"></select>

<script> 
     function updateList(event) {
         if( event.srcElement.value === "B.Tech") {
             //Add to your second list
             document.getElementById("mysecondList").appendChild();
         }
         .............
     }
</script>

如何使用一个列表的元素作为html中另一个列表的条件？

2 个答案: