Question

我想在我的div中添加文本框。文本框的数量由选择列表给出。

<DOCTYPE html>

<html>    
 <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript"></script>

 </head>

 <body>     
  <div id = "text">
    Choose No.of TextBoxes:
    <select id = "options">
       <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>
    </select>
    <br/>
  </div>
 </body>

Answer 1

这是 FIDDLE

$('select#options').change(function () {
    $('div#text input').remove();
    var val = $(this).val();
    for (var x = 0; x < val; x++) {
        var createInputTextBox = '<input type="textbox" />';
        $('div#text').append(createInputTextBox);
    }
});

Answer 2

试试这个

$(document).ready(function()
{
    $("#options").change(function()
    {
        //Find if there is already a input box
        //if yes then remove it
        $("#text").find("input").remove();
        var count = $(this).val();

        for (var i = 1; i <= count; i++) {
            var ipBoxName ="myInput"+i;
            var ipBox = '&nbsp;&nbsp;<input type="textbox" name="'+ipBoxName+'" />';
            $('div#text').append(ipBox);

        }  
    });
});

Answer 3

你可以试试这个：

$("select").change(function () {
  $(this).siblings("input").remove();
  for (i = 0; i < this.value; i++) {
    $("<input/>", {
        type: text,
        id: "textbox" + i
        //you add more attributes here if you want
    }).appendTo("#text");
  }
});

以下是演示：http://jsfiddle.net/bPdPE/5/

请查看jquery网站上的.change()。

Answer 4

将此代码写入jQuery： -

 $('#options').change(function()
    {
        var no_of_textbox = $(this).val();   

        for(var i = 1 ;i<=no_of_textbox;i++)
        {
            $('#divtable').append('<input type="textbox" name="textbox"+i>');

        }


    });

Answer 5

调用选择框的onchange事件的函数。喜欢这个

<select id = "options" onchange="setbox(this.value)">

在头标记内使用。

<script>
function setbox(val)
{ 
     for(var i = 1 ;i<=val;i++)
     {
        $('#divtable').append('<input type="textbox" name="textbox">');

    }
}

</script>

使用jquery添加选定数量的文本框

5 个答案: