文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >从另一个下拉列表中选择特定值时，自动从下拉列表中选择一个值

问从另一个下拉列表中选择特定值时，自动从下拉列表中选择一个值
EN

Stack Overflow用户
提问于 2022-02-11 03:41:46
回答 1查看 39关注 0票数 -1

基本上，我试图从下拉菜单中选择一个值，从另一个下拉复选框中选择一个值。

​

代码语言：javascript
复制
var gender1 = document.querySelector("#gender1");
var gender2 = document.querySelector("#gender2");

gender1.addEventListener("change", function() {
  var value = gender1.value;
  switch (value) {

    case "Boy":
      gender2.value = "Tipu";
      break;

    case "Girl":
      gender2.value = "Ayubi";
      break;

  }
})
代码语言：javascript
复制
<select class="input_select" name="student_gender" id="gender1">
  <option value="Boy" '.$selected_boy.'>Boy</option>
  <option value="Girl" '.$selected_girl.'>Girl</option>
</select>

<select class="input_select" name="student_class_section" id="gender2">
  <option value="Tipu" '.$selected_boy.'>Tipu (Boy)</option>
  <option value="Ayubi" '.$selected_girl.'>Ayubi (Girl)</option>
</select>

​

​

​

这是我完整的HTML页面代码。请看一下这个问题。非常感谢。

代码语言：javascript
复制
    <head>
        <title>Jeelani High School & Academy® - '.$page_title.'</title>
        '.$jscript_data.'
        '.$css_data.'
        <script type="text/javascript">
            var gender1 = document.querySelector("#gender1");
            var gender2 = document.querySelector("#gender2");

            gender1.addEventListener("change", function() {
                var value = gender1.value;

                switch (value) {
                    case "Boy":
                        gender2.value = "Tipu";
                        break;

                    case "Girl":
                        gender2.value = "Ayubi";
                        break;
                }
            });

            gender2.addEventListener("change", function() {
                var { value } = gender2;

                switch (value) {
                    case "Tipu":
                        gender1.value = "Boy";
                        break;

                    case "Ayubi":
                        gender1.value = "Girl";
                        break;
                }
            });
        </script>
    </head>
    <body>
    '.$header.'
    <table border="0" cellspacing="1" cellpadding="1" class="tborder">
        <tr>
            <td class="tcat" colspan="2">Create New Student</td>
        <tr>
            <td class="trow1" width="70%" valign="top">
                <form name="CreateStudent" action="students.php" onsubmit="return validateFormStudent()" method="post" enctype="multipart/form-data">
                    <table border="0" cellspacing="1" cellpadding="1" width="100%">
                        <tr>
                            <td class="tcat2" colspan="2">Personal Info</td>
                        </tr>
                        <tr>
                            <td width="20%" class="trow1">Student\'s Name:</td>
                            <td width="50%" class="trow1"><input type="text" class="input_box" name="student_name" value="" size="20" maxlength="40" oninput="this.value = this.value.replace(/[^a-zA-Z \,]/, \'\');" autofocus><span style="margin-left: 10px; color: #FF0000;">*</span>
                                <span style="float: right;">
                                    <div class="image-upload">
                                        <label for="file-input"><span class="profile_image_upload"><img src="./profile_image.png"> Upload Profile Image<input type="checkbox" class="input_checkbox" name="upload_profile_image" value="1"/></span></label>
                                        <input id="file-input" type="file" name="image" />
                                    </div>
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="trow2">Student\'s Gender:</td>
                            <td width="80%" class="trow2">
                            <select class="input_select" name="student_gender" id="gender1">
                                <option value="Boy"'.$selected_boy.'>Boy</option>
                                <option value="Girl"'.$selected_girl.'>Girl</option>
                            </select>
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="trow1">Father\'s Name:</td>
                            <td width="80%" class="trow1"><input type="text" class="input_box" name="student_father_name" value="" size="20" maxlength="40" oninput="this.value = this.value.replace(/[^a-zA-Z \,]/, \'\');"></td>
                        </tr>
                        <tr>
                            <td width="20%" class="trow2">Contact #:</td>
                            <td width="80%" class="trow2"><input type="text" class="input_box" name="student_contact_no" value="" size="20" oninput="this.value = this.value.replace(/[^0-9,]/, \'\');"><div class="small_text">Comma separated numbers.</div></td>
                        </tr>
                        <tr>
                            <td width="20%" class="trow1">Address:</td>
                            <td width="80%" class="trow1"><input type="text" class="input_box" name="student_address" value="" size="40"></td>
                        </tr>
                        <tr>
                            <td class="tcat2" colspan="2">Class Info</td>
                        </tr>
                        <tr>
                            <td width="20%" class="trow1">Student\'s Class:</td>
                            <td width="80%" class="trow1">
                                <select class="input_select" name="student_class">
                                <option value="Play Group"'.$selected_pg.'>Play Group</option>
                                <option value="Nursery"'.$selected_nur.'>Nursery</option>
                                <option value="Prep."'.$selected_prep.'>Prep.</option>
                                <option value="1"'.$selected_1.'>Class 1</option>
                                <option value="2"'.$selected_2.'>Class 2</option>
                                <option value="3"'.$selected_3.'>Class 3</option>
                                <option value="4"'.$selected_4.'>Class 4</option>
                                <option value="5"'.$selected_5.'>Class 5</option>
                                <option value="6"'.$selected_6.'>Class 6</option>
                                <option value="7"'.$selected_7.'>Class 7</option>
                                <option value="8"'.$selected_8.'>Class 8</option>
                                <option value="Pre-9"'.$selected_pre9.'>Pre 9</option>
                                <option value="9"'.$selected_9.'>Class 9</option>
                                <option value="10"'.$selected_10.'>Class 10</option>
                            </select>
                            </td>
                        </tr>
                        <tr>
                            <td width="20%" class="trow2">Class Section:</td>
                            <td width="80%" class="trow2">
                                <select class="input_select" name="student_class_section" id="gender2">
                                    <option value="Tipu"'.$selected_boy.'>Tipu (Boy)</option>
                                    <option value="Ayubi"'.$selected_girl.'>Ayubi (Girl)</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td class="tcat2" colspan="2">Fees Info</td>
                        </tr>
                        <tr>
                            <td width="20%" class="trow1">Monthly Fee:</td>
                            <td width="80%" class="trow1"><input type="text" class="input_box" name="student_monthly_fee" value="" size="10" oninput="this.value = this.value.replace(/[^0-9,]/, \'\');" autofocus></td>
                        </tr>
                        <tr>
                            <td class="tcat2" colspan="2" align="center">
                                <input type="hidden" name="action" value="do_create_student">
                                <input type="hidden" name="my_post_key" value="'.$mybb->post_code.'" />
                                <input type="submit" class="input_button" name="submit" value="Create Student" />
                            </td>
                        </tr>
                    </table>
                </form>
            </td>
            <td class="trow1" width="30%" valign="top">'.$menu.'</td>
        </tr>
    </table>
    <br />
    </body>
</html>

这是我完整的HTML页面代码。请看一下这个问题。非常感谢。

javascript
html
EN

回答 1

Stack Overflow用户

发布于 2022-02-11 03:59:38

您所需要做的就是向#gender2添加几乎相同的事件侦听器。

​

代码语言：javascript
复制
var gender1 = document.querySelector("#gender1");
var gender2 = document.querySelector("#gender2");

gender1.addEventListener("change", function() {
    var value = gender1.value;

    switch (value) {
        case "Boy":
            gender2.value = "Tipu";
            break;

        case "Girl":
            gender2.value = "Ayubi";
            break;
    }
});

gender2.addEventListener("change", function() {
    var { value } = gender2;

    switch (value) {
        case "Tipu":
            gender1.value = "Boy";
            break;

        case "Ayubi":
            gender1.value = "Girl";
            break;
    }
});
代码语言：javascript
复制
<select class="input_select" name="student_gender" id="gender1">
    <option value="Boy">Boy</option>
    <option value="Girl">Girl</option>
</select>

<select class="input_select" name="student_class_section" id="gender2">
    <option value="Tipu">Tipu (Boy)</option>
    <option value="Ayubi">Ayubi (Girl)</option>
</select>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/71075087

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档