顯示當下拉列表添加項目點擊

-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

顯示當下拉列表添加項目點擊

回答

相關問題