Javascript - Append select lists from select

Question

How can i auto generate multiple select lists from a select list like this example :

My code :

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

This code only create text inputs. But, i need to display multiple rooms (chambre) by selecting the number from select option. After that, if il select N kids (enfants), N select should appears to choose their ages.

I hope it's clear :)

your JS code is quite messy. however, what's the result of it? — shershen
– shershen, Commented Apr 15, 2016 at 21:03
seems you on the right way... what is unclear for you? you now need to create same code for adults and infants and a function like subcreate(chambre_id, adults_value, infants_value) — kay27
– kay27, Commented Apr 15, 2016 at 21:14

kay27 · Accepted Answer · 2016-04-15 23:31:31Z

1

sorry, i'm not a big jquery fan, but as nobody answers, i try.

so fist, i would made some function get_chambre_html(cn) that will generate some Chambre html block, to append it in 'for' loop in your create().

then, next line after append() in create() function we may add change() event listeners for each new block, like you do it for chambres.

to add additional fields for each child we will append them to $('#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>

edited Apr 15, 2016 at 23:31

answered Apr 15, 2016 at 22:59

kay27

9097 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Senneville Over a year ago

Almost perfect ! I changed the enfants part, just two litte fixes. The switch of number of enfants and "Age enfant" should strat with 1 not 0. jsfiddle.net/v1okgzw0/2

Senneville Over a year ago

Any help please ? :(

kay27 Over a year ago

What help do you need now?

Senneville Over a year ago

Two small issues with the Enfants select menu. The number start with 0 not 1. And the change of the Enfants number doesn't look correct

Senneville Over a year ago

PERFECT ! Thank you !

|

Collectives™ on Stack Overflow

Javascript - Append select lists from select

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related