Question

我有一个下拉列表，从数据库中提取值， enter image description here

现在，当最后一个选项是＆＃34;添加小学＆＃34;如果选中，我希望隐藏下拉列表，输入文本将替换下拉列表，让用户输入这样的不存在的数据。感谢

enter image description here

这是我的HTML代码。

＆＃13;

<select id="elemschool" class="form-control">
<?php
  $select=$dbcon->query("Select * from elem_school");
      while ($row=$select->fetch_array()) {
        ?>
                        <option value="<?php echo $row['Elem_ID']?>">
                          <?php echo $row['School_Name']?>
                        </option>
    <?php
       }
  ?>
        <option style="background-color: #77A5F8" class="addelem" value="addelementary">- ADD ELEMENTARY SCHOOL -</option>
    
</select>

<input type="text" class="form-control hidden" name="elem_school" id="elem_school" placeholder="NAME OF SCHOOL">

</div>

＆＃13;

Answer 1

首先，请向我们提供现有代码的片段，以便我们将其更改为工作代码，其次如果有人想要选择

MANAOLO FORTICH CENTRAL ELEMENTARY SCHOOL

并选择了

添加ELEMENTARY SCHOOL选项

如果不存在

，您将如何允许用户选择其他选项

我建议根据用户从列表中选择的内容显示/隐藏或禁用/启用输入框

＆＃13;

<html>

<head>
</head>

<body>
  <select name='school' onchange="newSchool(this.value)">
  <option value="">Select a school</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
  <input type="text" id="input" disabled />

  <script>
    function newSchool(schoolName) {
      if (schoolName == 3) {
        document.getElementById("input").disabled = false;
      } else {
        document.getElementById("input").disabled = true;
      }
    }
  </script>
</body>

</html>

＆＃13;

如果你想隐藏它并禁用它

＆＃13;

<html>

<head>
</head>

<body>
  <select name='school' onchange="newSchool(this.value)">
  <option value="">Select a school</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
  <input type="text" id="input" disabled />

  <script>
    document.getElementById("input").hidden = true;

    function newSchool(schoolName) {
      if (schoolName == 3) {
        document.getElementById("input").hidden = false;
        document.getElementById("input").disabled = false;
      } else {
        document.getElementById("input").hidden = true;
        document.getElementById("input").disabled = true;
      }
    }
  </script>
</body>

</html>

＆＃13;

Answer 2

准备两个DOM元素。可见的select元素和隐藏的input元素。将change事件绑定到select元素，并检查该值是否等于名为“add elementary school”的项的值，然后隐藏select元素并显示输入元素。

单击下拉列表中的添加项目时显示输入文本

2 个答案: