显示当下拉列表添加项目点击

-1

我有一个下拉菜单，其中的值是从数据库中提取输入文字， enter image description here 显示当下拉列表添加项目点击

现在

，当选择了最后一个选项是“添加初等学校”，我想要隐藏下拉框，输入文字将替换为下拉框，让用户输入一个像这样的不存在的数据。由于

enter image description here

这是我的HTML代码。

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

来源

2017-03-18 Laurie

-1

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

来源

2017-03-18 13:05:52 innerpeace

首先，请向我们提供与现有的代码片段，所以我们可以把它改成一个正在运行的;其次，如果有人想选择

MANAOLO FORTICH中心小学

什么

和选定的

ADD ELEMENTARY SCHOOL选项

你如何将允许用户选择其他选项，如果它不存在

我会建议是显示/隐藏或禁用/启用取决于从列表

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

选择哪些用户输入框

如果你想隐藏它，以及将其禁用

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

来源

2017-03-18 13:17:05

显示当下拉列表添加项目点击

回答

相关问题