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

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>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值