Question

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

大家好！）

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

我不知道如何执行此功能：（

我需要帮助..

如果从下拉列表中选择1，则应显示文本框，如果从下拉列表中选择2，则应显示文本框...与剩余文本框相同...

三江源..

Answer 1

  <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不起作用，请尝试以下代码：

 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>

Answer 2

看一下这个链接，你就可以了解它..首先你需要尝试一下......

how can select from drop down menu and call javascript function

Answer 3

您可以尝试以下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.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>

根据从下拉列表中选择的值显示文本框

3 个答案: