Javascript - Anfügen Auswahllisten von ausgewählten

Wie kann ich Auto mehr Auswahllisten aus einer Auswahlliste wie in diesem Beispiel erzeugen:Javascript - Anfügen Auswahllisten von ausgewählten

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

Dieser Code erstellt nur Texteingaben. Aber ich muss mehrere Räume (chambre) anzeigen, indem ich die Nummer aus der Option auswähle. Wenn danach N Kinder (enfants) ausgewählt werden, erscheint N select, um ihr Alter zu wählen.

Ich hoffe, dass es klar ist :)

Quelle

2016-04-05 Senneville

Jede Hilfe bitte anhängen? : '( – Senneville

Ihr JS-Code ist ziemlich unordentlich. Was aber ist das Ergebnis davon? – shershen

Das ist es https://jsfiddle.net/v1okgzw0/1/ – Senneville

sorry, ich bin kein großer jquery-Fan, aber als niemand antwortet, versuche ich.

also faust, ich würde eine Funktion get_chambre_html (cn) gemacht, die einige Chambre HTML-Block erzeugen wird, um es in 'for' Schleife in Ihrem create() anzuhängen.

dann, nächste Zeile nach append() in create() -Funktion können wir change() -Ereignislistener für jeden neuen Block hinzufügen, wie Sie es für chambres tun.

für jedes Kind um weitere Felder hinzuzufügen wir sie $('#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>

Quelle

2016-04-15 22:59:21 kay27

Fast perfekt! Ich habe den Enfants Teil geändert, nur zwei kleine Korrekturen Die Umschaltung der Anzahl der Enfants und "Age Enfant" sollte strat mit 1 nicht 0. https://jsfiddle.net/v1okgzw0/2/ – Senneville

Irgendwelche Hilfe bitte? :( – Senneville

Welche Hilfe brauchst du jetzt? – kay27

Javascript - Anfügen Auswahllisten von ausgewählten

Antwort

Verwandte Themen