Javascript - 从选择中附加选择列表

标签 javascript jquery html

我怎样才能像这个例子一样从一个选择列表中自动生成多个选择列表:

enter image description here

我的代码:

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

此代码仅创建文本输入。但是,我需要通过从选择选项中选择数字来显示多个房间(房间)。之后,如果我选择N个 child (enfants),应该出现N个select来选择他们的年龄。

我希望它很清楚:)

最佳答案

抱歉,我不是 jquery 的忠实粉丝,但由于没有人回答,我试试。

首先,我会创建一些函数 get_chambre_html(cn) 来生成一些 Chambre html block ,将其附加到 create() 的“for”循环中。

然后,在 create() 函数中的 append() 之后的下一行,我们可以为每个新 block 添加 change() 事件监听器,就像您为 chambres 所做的那样。

要为每个 child 添加额外的字段,我们会将它们附加到 $('#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 - 从选择中附加选择列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36438256/

相关文章:

javascript - 显示隐藏内容

jquery - 使用当前背景颜色的 CSS 关键帧动画

javascript - jQuery 点击影响另一个元素

javascript - Home 组件仅在刷新时加载(而不是在初始加载时),竞争条件?

html - 在中心 css 中对齐内容

javascript - Office.js 在搜索中转义特殊字符

javascript - PHPStorm(苹果机): Cannot debug --> Chrome keeps waiting for localhost

javascript - 在 AngularJS 中显示从 Controller 附加的值时出现警告消息

php - 有没有办法让ajax请求始终按顺序进行?

html - 为什么开发工具提供 Quirks 模式?