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

此代码仅创建文本输入。但是,我需要通过从选择选项中选择数字来显示多个房间(房间)。之后,如果 il 选择 N 个 child ( child ),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/

相关文章:

php - PHP&JS组合框触发事件

javascript - 在 DOM 中存储数据 - 自定义属性或 .data()

css - 按 : 对齐 HTML 输入字段

javascript - AngularJS:全局访问服务?

javascript - 测试失败-多次调用Mocha的done()

javascript - 如何使用 Meteor Iron Router 创建单独的模板 HTML 文件

jquery - CodyHouse 的图像比较 slider 与 fullPage.js 冲突

javascript - 如何只更改 DOM 元素中的文本而不替换任何子元素

javascript - 使用带有 jQ​​uery 的 TypeScript 引用文件不存在

java - 您如何在网站的预览描述和预览图像中编码?