Javascript dropsown select上的文本框_Javascript_Jquery

Javascript dropsown select上的文本框

javascript jquery

Javascript dropsown select上的文本框,javascript,jquery,Javascript,Jquery,我是jQuery的初学者。我想在我的页面中使用下拉列表。根据下拉值的选择，页面中不应出现任何文本框。假设我选择了8个文本框，然后出现8个文本框，如果我选择了4个文本框，则应删除其余4个文本框。请告诉我如何使用jQuery来完成这项工作。 jQuery('#select').change(function() { var num = jQuery(this).val(); jQuery('.textboxes').remove(); for(i=0;i<num;i++) { jQue

我是jQuery的初学者。我想在我的页面中使用下拉列表。根据下拉值的选择，页面中不应出现任何文本框。假设我选择了8个文本框，然后出现8个文本框，如果我选择了4个文本框，则应删除其余4个文本框。请告诉我如何使用jQuery来完成这项工作。




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");

}
});


jQuery（'#select'）.change（function（）{
var num=jQuery（this.val（）；
jQuery（'.textboxs'）.remove（）；
对于（i=0；iRahul），您需要的是一个想法，就是这样。使用jQuery，您可以找到下拉列表或选择元素的值，并使用该值简单地附加新的文本框。我建议不要创建元素，而是为这些元素插入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>


0
1.
2.
3.
4.
5.
6.
7.
8.
9
10
$（文档）.ready（函数（）{
$（'#select'）。更改（函数（）{
var num=$（'#select'）.val（）；
$（'.textboxs'）.remove（）；
var textBoxesStr=''；
对于（i=0；i

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

<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>

动态形式
函数changeIt（）
{  
document.getElementById（“my_div”）.innerHTML=“”；
var num=document.getElementById（“选择”）.options[document.getElementById（“选择”）.selectedIndex].value；
对于（i=0；我在函数中对此进行标记，并将其与onchange
下拉事件一起使用看看@Sushil给出的示例代码，这不仅仅是hint@Rahul检查我给出的代码，复制粘贴到记事本中，另存为.html并检查，不确定，但我想JSFIDLE可能不允许您将元素附加到body
Pranav，Rahul似乎在对jQuery解决方案感兴趣。@kumar:-对不起，我不知道jQuery，但这将支持您的代码。