select、radio選中某一項後,自動彈出一個相應文字框供輸入
阿新 • • 發佈：2019-01-04
1、select，彈出相應文字框
說明：當select選中值改為else，其值為“-1”時，顯示一個自定義的輸入框，若要將自定義的項加入到select的資料項中，需在後臺將自定義項存入對應的資料表中，這樣，在重新整理後，下一次訪問這個select時，該自定義項就會出出現在select的選項中。專案的技術成果釋出表單中的就有該功能的應用。js：<scriptlanguage="javascript"> function chg(obj) { if(obj.options[obj.selectedIndex].value =="-1") document.getElementById("select_else").style.display=""; else document.getElementById("select_else").style.display="none"; } </script>
html
<select onchange="chg(this)">
<option value = "1">BeiJing</option>
<option value = "2">ShangHai</option>
<option value = "3">GuangZhou</option>
<option value = "-1">Else</option>
</select>
<input id="select_else" style="display:none"> 2、radio，彈出相應文字框
說明：初始的狀態是，隱藏專利名和專利號兩個文字輸入框 ，當點選有專利，顯示兩個文字輸入框，點選無專利，隱藏文字輸入框。專案的技術成果釋出表單中的就有該功能的應用。html:
<!-- 單選項，通過點選某個選項來顯示或是隱藏某個元素 -->
<tr>
<td><strong>是否有專利：</strong></td>
<td>
<input type="radio" name="patent" value="1" onchange="chy(this)">有專利
<input type="radio" name="patent" value="0" onchange="chn(this)">無專利
</td>
</tr>
<tr id="patent1" style="display:none">
<td><strong>專利名稱</strong></td>
<td><input type="text" class="form-control" placeholder="專利名稱,無則不填" name="patent_name"></td>
</tr>
<tr id="patent2" style="display:none">
<td><strong>專利號</strong></td>
<td><input type="text" class="form-control" placeholder="專利號,無則不填" name="patent_id"></td>
</tr> js：
<script language="javascript">
function chy(obj){
var rr = $("input[type='radio']:checked").val();
if(rr =="1"){
document.getElementById("patent1").style.display="";
document.getElementById("patent2").style.display="";
}
}
function chn(obj){
var rr = $("input[type='radio']:checked").val();
if(rr =="0"){
document.getElementById("patent1").style.display="none";
document.getElementById("patent2").style.display="none";
}
}
</script>