Question

我是jQuery的初学者。我想在我的页面中使用下拉菜单。根据下拉值的选择，页面中不应出现任何文本框。假设我选择了8个以上的文本框，如果那时我选择4而不是其余4个应该被删除。请让我知道如何使用jQuery。

Answer 1



jQuery('#select').change(function() {
var num = jQuery(this).val();

jQuery('.textboxes').remove();

for(i=0;i<num;i++)
{
jQuery("<input type='text' class='textboxes' />").appendTo("body");

}
});

这里select是selectbox的id。

Answer 2

Rahul你是在寻求一个想法，所以在这里。使用jQuery，您可以找到下拉列表或select元素的值，并使用该值简单地附加新文本框。我建议不要创建元素，而是为这些元素插入html。

  <script src="http://code.jquery.com/jquery-latest.js"></script>

<select name="select" id="select">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

<div id="textbox-container"></div>
<script>

$(document).ready(function() {
    $('#select').change(function() {
        var num = $('#select').val();
        $('.textboxes').remove();
        var textBoxesStr = '';
        for (i = 0; i < num; i++) {
            textBoxesStr = textBoxesStr + "<input type='text' class='textboxes' />";
        }
        $("#textbox-container").append(textBoxesStr);
    });
});
</script>

上面给出的代码对我有用。

Answer 3

<html>
  <head>  
<title>Dynamic Form</title>  
 <script language="javascript">    
function changeIt()  
 {  
 document.getElementById("my_div").innerHTML="";  
var num=document.getElementById("select").options[document.getElementById("select").selectedIndex].value;  
 for(i=0;i<num;i++)  
{  
my_div.innerHTML = my_div.innerHTML +"<br><input type='text' name='mytext'+ i>"
}

}  
</script>

</head>
<body>

<form name="form" action="post" method="">
<select name="select" id="select">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>  
</select>  

<input type="button" value="test" onclick="changeIt()">
<div id="my_div"></div>
</form>
</body>
</html>

下拉列表中的文本框选择

3 个答案: