根据从下拉列表中选择的值显示文本框 [英] display textbox as per the value selected from dropdown

查看:94
本文介绍了根据从下拉列表中选择的值显示文本框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

<select>
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
</select>

大家好:)

我有一个带有下拉列表和文本框的页面.下拉列表包含数字..一旦用户从下拉列表中选择值,它将显示基于所选数字的文本框...

I have a page with drop down list and text box.The drop down list contains numbers.. once the user select value from drop down list it will display text boxes based on the chosen number...

我不知道如何执行此功能:(

I don't know how to perform this function :(

我需要帮助..

如果从下拉菜单1中选择1,则应显示文本框;如果从下拉菜单2中选择2,则应显示文本框...与剩余部分相同...

If 1 is selected from dropdown 1 text box should be displayed , if 2 is selected from dropdown 2 text box should be displayed...same as for remaining...

谢谢..

推荐答案

  <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $('#slct').change(function () {
            var value = $(this).val(); var toAppend = '';
            if (value == 1) {
                toAppend = "<input type='textbox' >"; $("#container").html(toAppend); return;
            }
            if (value == 2) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >"; $("#container").html(toAppend); return;
            }
            if (value = 3) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >&nbsp;<input type='textbox' >"; $("#container").html(toAppend); return;

            }

        });

    });
     </script>
  </head>
 <body>
<form id="form1" runat="server">
<div>
     <select id="slct">
   <option value="1"> 1 </option>
     <option value="2"> 2 </option>
   <option value="3"> 3 </option>
    </select>
   <div id="container"></div>
</div>
</form>
  </body>
   </html>

如果jquery对您不起作用,请尝试以下代码:

if jquery didn't work to you try this code :

 function change() {
        var select = document.getElementById("slct");
        var divv = document.getElementById("container");
        var value = select.value;
        if (value == 1) {
            toAppend = "<input type='textbox' >"; divv.innerHTML=toAppend; return;
            }
            if (value == 2) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >";divv.innerHTML = toAppend;  return;
            }
            if (value = 3) {
                toAppend = "<input type='textbox' >&nbsp;<input type='textbox' >&nbsp;<input type='textbox' >";divv.innerHTML = toAppend;  return;

            }
     }

<select id="slct" onchange="change();">
 <option value="1"> 1 </option>
<option value="2"> 2 </option>
 <option value="3"> 3 </option>
  </select>
  <div id="container"></div>

这篇关于根据从下拉列表中选择的值显示文本框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆