在下拉选择中隐藏或显示输入

Question

I am trying to create a sign-up page for my app.我正在尝试为我的应用创建一个注册页面。 All the code works, but when I try to hide input box based on dropdown select, it doesn't work.所有代码都有效，但是当我尝试基于下拉选择隐藏输入框时，它不起作用。 I tried this:我试过这个：

<script>
  var select = document.getElementById("card");
  select.onchange = function() {
    if (select.value == "Yes") {
      document.getElementById("cards").style.display = "inline";
    } else {
      document.getElementById("cards").style.display = "none";
    }

  }
</script>

<select id="card" name="user_id">
    <option value="No">No</option>
    <option value="Yes">Yes</option>
</select><br><br>

<input id="cards" type="text"><br><br>

But it didn't work.但它没有用。

And this is my code for the signup page:这是我的注册页面代码：

<!DOCTORTYPE html>
<html>

<head>
    <title>Signup</title>
</head>

<body>

<style type="text/css">
    #text {

        height: 25px;
        border-radius: 5px;
        padding: 4px;
        border: solid thin #aaa;
        width: 75%;
    }

    #button {

        padding: 10px;
        width: 100px;
        color: white;
        background-color: lightblue;
        border: none;
    }

    #box {

        background-color: grey;
        margin: auto;
        width: 500px;
        padding: 20px;
    }
</style>

<div id="box">
    <form method="post">
        <div style="font-size: 20px;margin: 10px;color: white;">Signup</div>

        <PRE><font size="+2">Name</font></PRE><br>
        <input id="text" type="text" name="user_name"><br><br>
        <PRE><font size="+2">Surname</font></PRE><br>
        <input id="text" type="text" name="user_surname"><br><br>
        <PRE><font size="+2">Username</font></PRE><br>
        <input id="text" type="text" name="username"><br><br>
        <PRE><font size="+2">Password</font></PRE><br>
        <input id="text" type="password" name="password"><br><br>
        <PRE><font size="+2">Select position:</font></PRE><br>
        <select name="job">
            <option value="student">Student</option>
            <option value="teacher">Teacher</option>
            <option value="staff">Staff</option>
            <option value="principal">Principal</option>
        </select><br>
        <PRE><font size="+2">Select gender:</font></PRE><br>
        <select name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select><br><br>
        <PRE><font size="+2">Card ID:</font></PRE><br>
        <script>
          var select = document.getElementById("card");
          select.onchange = function() {
            if (select.value == "Yes") {
              document.getElementById("cards").style.display = "inline";
            } else {
              document.getElementById("cards").style.display = "none";
            }

          }
        </script>

        <select id="card" name="user_id">
            <option value="No">No</option>
            <option value="Yes">Yes</option>
        </select><br><br>

        <input id="cards" type="text"><br><br>


        <input id="button" type="submit" value="Signup"><br><br>

        <a href="index.php">Back to main page</a><br><br>
    </form>
</div>
</body>

</html>

Answer 1

It does work, you only need to place the script underneath the form tags.它确实有效，您只需将脚本放在表单标签下方。 It can't execute the script on elements that it can't find, because they are underneath it.它不能在它找不到的元素上执行脚本，因为它们在它下面。 Keep in mind that scripts get executed from top to bottom.请记住，脚本是从上到下执行的。 I also added selected to the Yes value so when you click No the script starts working.我还在 Yes 值中添加了selected ，因此当您单击 No 时，脚本开始工作。

 <html> <head> <title>Signup</title> </head> <body> <style type="text/css"> #text { height: 25px; border-radius: 5px; padding: 4px; border: solid thin #aaa; width: 75%; } #button { padding: 10px; width: 100px; color: white; background-color: lightblue; border: none; } #box { background-color: grey; margin: auto; width: 500px; padding: 20px; } </style> <div id="box"> <form method="post"> <div style="font-size: 20px;margin: 10px;color: white;">Signup</div> <PRE><font size="+2">Name</font></PRE><br> <input id="text" type="text" name="user_name"><br><br> <PRE><font size="+2">Surname</font></PRE><br> <input id="text" type="text" name="user_surname"><br><br> <PRE><font size="+2">Username</font></PRE><br> <input id="text" type="text" name="username"><br><br> <PRE><font size="+2">Password</font></PRE><br> <input id="text" type="password" name="password"><br><br> <PRE><font size="+2">Select position:</font></PRE><br> <select name="job"> <option value="student">Student</option> <option value="teacher">Teacher</option> <option value="staff">Staff</option> <option value="principal">Principal</option> </select><br> <PRE><font size="+2">Select gender:</font></PRE><br> <select name="gender"> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> </select><br><br> <PRE><font size="+2">Card ID:</font></PRE><br> <select id="card" name="user_id"> <option value="No">No</option> <option value="Yes" selected>Yes</option> </select><br><br> <input id="cards" type="text"><br><br> <input id="button" type="submit" value="Signup"><br><br> <a href="index.php">Back to main page</a><br><br> </form> <script> var select = document.getElementById("card"); select.onchange = function() { if (select.value == "Yes") { document.getElementById("cards").style.display = "inline"; } else { document.getElementById("cards").style.display = "none"; } } </script> </div> </body> </html>

在下拉选择中隐藏或显示输入

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-05-13 16:30:50

在下拉选择中隐藏或显示输入

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-05-13 16:30:50

解决方案1
0 已采纳 2022-05-13 16:30:50