0

I have a select box:

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

Now, if the user selects "4", then 4 input boxes needed to be added to the page, if he changes his selection to 8, 8 input boxes need to be there, an so on...

And also, the input boxes names are important, I'm gonna send the form values to another page for processing and inserting the data into db, how I could know/get the newly made input boxes names?

4

4 に答える 4

3

非常に単純な例（ここでも示されています）：

// 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']表示されるようになります。または、フォームメソッドに応じて、$_POSTまたはにも表示され$_GETます。

于 2012-04-13T12:49:22.813 に答える
0

これが私の解決策です：

<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>
于 2012-04-13T12:59:26.803 に答える
0

私はあなたのためにいくつかの基本的な機能を書きました。ただし、ニーズに合わせて拡張する必要があります。

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

jsFiddleで見る

于 2012-04-13T12:49:36.450 に答える
0

You could do something like this: 

<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>
于 2012-04-13T12:53:37.027 に答える