Question

如何从选择列表中自动生成多个选择列表，如下例所示：

我的代码：

HTML ：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="multiple.js"></script>

<div class="container">
    <div id="selected_form_code">
        <select id="select_btn">
                <option value="0">--How many rooms ?--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
        </select>
    </div>
    <div id="form_submit">
        <!-- Dynamic Registration Form Fields Creates Here -->
    </div>
</div>

JS：

$(document).ready(function() {
    $('select#select_btn').change(
        function() {
            var sel_value = $('option:selected').val();
            $("#form_submit").empty(); //Resetting Form
            // Below Function Creates Input Fields Dynamically
            create(sel_value);
            // Appending Submit Button To Form
        }
    );
    function create(sel_value) {     
        for (var i = 1; i <= sel_value; i++) {
            $("div#form1").append($("#form_submit"
                         ).append($("<div/>", {id: 'head' }
                         ).append($("<b>").text("Chambre " + i)), 
                            $("<input/>", 
                                { type: 'text', placeholder: 'Chambre ' + i, name: 'Chambre-' + i } ) ))
        }
    }
});

此代码仅创建文本输入。但是，我需要通过从选择选项中选择数字来显示多个房间（chambre）。之后，如果我选择N个孩子（enfants），N选择应该会选择他们的年龄。

我希望很清楚：）

Answer 1

抱歉，我不是一个大粉丝，但是没有人回答，我试试。

所以，我会制作一些函数get_chambre_html（cn）来生成一些Chambre html块，将它附加到你的create（）中的'for'循环中。

然后，在create（）函数中追加（）之后的下一行我们可以为每个新块添加change（）事件侦听器，就像你为chambres做的那样。

为每个孩子添加其他字段，我们会将其附加到$('#ages'+chambre_index)[0]

<html><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="container">
    <div id="selected_form_code">
            <select id="select_btn">
                    <option value="0">--How many rooms ?--</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>
            </select>
    </div>
    <div id="form_submit">
    <!-- Dynamic Registration Form Fields Creates Here -->
    </div>
</div>
<script>
function get_chambre_html(cn)
{
  return "<div>"
      + "<b>Chambre " + cn + ":</b> "
      + "Adultes: <select id='adultes" + cn + "'>"
      + "<option value='0'>--How many adults ?--</option>"
      + "<option value='1'>1</option>"
      + "<option value='2'>2</option></select>"
      + "<br/>Enfants: <select id='enfants" + cn + "'>"
      + "<option value='0'>--How many enfants ?--</option>"
      + "<option value='1'>1</option>"
      + "<option value='2'>2</option></select>"
      + "<div id='ages" + cn + "'></div>" // empty block for further usage
    +"</div>";
}

$(document).ready(function()
{
  $('select#select_btn').change(function()
  {
    var sel_value = $('option:selected').val();
    $("#form_submit").empty(); //Resetting Form
    // Below Function Creates Input Fields Dynamically
    create(sel_value);
    // Appending Submit Button To Form
  });


  function create(sel_value)
  {
    for (var i = 1; i <= sel_value; i++)
    {
      $("div#form1").append($("#form_submit").append(get_chambre_html(i)));
      $("div#form1").append($("#form_submit").append("<div id='ages"+i+"'/>"));
      $('select#enfants'+i).change(function(){
        var infants = this.value;
        var i=this.id.substr(7); // 7 = strlen of 'enfants'
        for(var j=0; j<infants; j++)
          $('#ages'+i).append(':[input age block '+i+']: ');
      });
    }
  };
});
</script>

Javascript - 从select中添加选择列表

1 个答案: