Question

我有一个选择框：

<select id="steps_number">
    <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>

现在，如果用户选择“4”，则需要将4个输入框添加到页面中，如果他将选择更改为8，则需要有8个输入框，等等...

而且，输入框名称很重要，我要将表单值发送到另一个页面进行处理并将数据插入db，我怎么知道/获取新制作的输入框名称？

Answer 1

非常简单的例子（也是demonstrated here）：

// bind to when the drop-down list changes
$('#steps_number').change(function(){    
    // find out the number to display
    var count = $(this).val();

    // Try to keep the fields already on the page. Remove anything
    // that exceeds the count
    $('#steps input:gt('+(count-1)+')').remove();

    // But if it doesn't have enough, add more
    for (var i = $('#steps input').length; i < count; i++){
        $('<input>',{type:'text',id:'step'+(i+1),name='step'+(i+1)}).appendTo('#steps');
    }
});

这假设您需要以下输入结构：

<div id="steps">
  <input type="text" id="step1" name="step1" />
  <input type="text" id="step2" name="step2" />
  <input type="text" id="step3" name="step3" />
  <!-- .... -->
</div>

关于服务器端，您现在可以使用$_REQUEST['step1']，$_REQUEST['step2']等查看输入。或者，根据您的表单方法，它们会显示在{{1 }}或$_POST。

Answer 2

我为你写了一些基本功能。但是你需要根据自己的需要进行扩展：

$('#steps_number').change(function(){
    for(var i=0; i < parseInt($(this).val()); i++) {
        $('body').append('<input type="text" name="someinput' + i + '">');
    }
});

见jsFiddle

Answer 3

你可以这样做：

<html>
<head>
    <title>Test</title>

    <script language="javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script language="javascript">

        $(document).ready(function(){

            alert("ok");
            $("#steps_number").change(function() { 
                var inputNum = $("#steps_number").val();

                var inputCode = "";
                for(i=0; i<inputNum; i++) { 
                    inputCode += "<p class=\"inputBox\"><input id=\"inputBox_" + i + "\" size=\"20\" type=\"text\"></p>"
                }

                $("#inputBoxes").html(inputCode);
            });
        });
    </script>
</head>

<body>

    <form id="testform">
        <select id="steps_number">
            <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="inputBoxes">

        </div>
    </form>
</body>
</html>

Answer 4

这是我的解决方案：

<select id="steps_number">
<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="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("#steps_number").on("change", function() {
    var count = $(this).val()
    $("#container").html("")
    for (i=0;i<count;i++) {
        $("<input>").appendTo("#container");
        $("<br>").appendTo("#container")
    }
})

</script>

根据选择框值添加多个输入框

4 个答案: