select、radio选中某一项后,自动弹出一个相应文本框供输入

最新推荐文章于 2023-12-21 16:41:54 发布

dby124

最新推荐文章于 2023-12-21 16:41:54 发布

阅读量1w

点赞数

分类专栏：网络编程文章标签： select javascript html

本文链接：https://blog.csdn.net/dby124/article/details/53134245

版权

网络编程专栏收录该内容

0 篇文章 0 订阅

订阅专栏

`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" οnchange="chy(this)">有专利
      <input type="radio" name="patent" value="0" οnchange="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>