Formularfeld hinzufügen, basierend auf Option Auswahl

Question

ich ein Formular, wo ich Formularfeld muss hinzufügen, basierend auf in der Auswahlbox ausgewählten Optionen

, was ich habe, ist, alle Formularfelder erstellt getan und basierend auf den Feldern Auswahl einblenden ausblenden, aber gibt es eine vereinfachte Möglichkeit, diese

<select name="child" id="child"> 
    <option value="0" selected="selected">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<div id="age1">              
    <select name="age1" id="age1"> 
    //options 
    </select> 
</div> 
<div id="age2">             
    <select> 
    //options 
    </select> 
</div> 
<div id="age3"> 
    <select> 
    //options 
    </select> 
</div> 

hier zu tun ist mein jquery

$('#child').change(function() { 
if($(this).val() == 0) {  
    $("div#age1").hide(); 
    $("div#age2").hide(); 
    $("div#age3").hide(); 
    $("div#age4").hide();  
} 

if($(this).val() == 1) { 
    $("div#age1").show(); 
    $("div#age2").hide(); 
    $("div#age3").hide(); 
    $("div#age4").hide(); 

} 
if($(this).val() == 2) { 
    $("div#age1").show(); 
    $("div#age2").show(); 
    $("div#age3").hide(); 
    $("div#age4").hide(); 
} 

if($(this).val() == 3) { 
    $("div#age1").show(); 
    $("div#age2").show(); 
    $("div#age3").show(); 
    $("div#age4").hide(); 
} 
if($(this).val() == 4) { 
    $("div#age1").show(); 
    $("div#age2").show(); 
    $("div#age3").show(); 
    $("div#age4").show(); 
} 
}); 

Wie es in vereinfachter Weise zu tun und wie Post-Wert erhalten für diese

Answer 1

Try This:

<select name="child" id="child"> 
<option value="0" selected="selected">0</option> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
<div class="myage" id="age1">              
<select name="age1" id="age_1"> 
    //options 
</select> 
</div> 
<div class="myage" id="age2">             
    <select> 
    //options 
    </select></div> 
    <div class="myage" id="age3"> <select> 
    //options 
    </select></div> 

Ihre JS:

$(".myage:eq(0)").show(); 
$('#child').change(function() { 
    $(".myage").hide(); 
    $(".myage:eq("+$(this).val()+")") .show(); 
}); 

Verwenden Klasse statt ID :)

Answer 2

gleichen grundlegenden Ansatz wie Prashant - aber theres keine Notwendigkeit, eq() zu verwenden, .. die divs haben alle IDs, die mit den Werten der Auswahlliste übereinstimmen - und beachten Sie, dass die erste Auswahlliste in Ihrem aktuellen Code die gleiche ID wie das übergeordnete div hat. Dies wird ein Problem verursachen, aber das folgende wird es beheben.

All dies ist auf die Änderung der # child Auswahlliste - löst alle divs zu verbergen (beachten Sie die Anzeige keine in der CSS, um sie zunächst auszublenden) und zeigen dann die, die Alter + Wert von Kind entspricht. Ich würde es selbst nicht so machen, aber angesichts des Codes, den Sie hatten, funktioniert das. Ich habe auch Optionen zu den Altersauswahllisten hinzugefügt, um ihnen etwas zu zeigen, wenn sie die #Kinderliste ändern.

Wie gesagt, ich würde nicht vorschlagen, es so zu machen - ich würde vorschlagen, eine neue Auswahlliste am Ende des Formulars basierend auf der Auswahl anzuhängen - auf diese Weise haben Sie nicht alle Auswahllisten nur dort sitzen und Sie don Wenn Sie das Formular abschicken, müssen Sie sich nicht darum kümmern, den ausgewählten Wert aus einer der ausgeblendeten Listen zu übermitteln. Nur ein Gedanke.

$('#child').change(function() { 
 
    $("div").hide(); 
 
    $("#age"+$(this).val()).show(); 
 
});

div{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="child" id="child"> 
 
<option value="0" selected="selected">0</option> 
 
<option value="1">1</option> 
 
<option value="2">2</option> 
 
<option value="3">3</option> 
 
<option value="4">4</option> 
 
</select> 
 
<div id="age1">              
 
<select name="age1"> 
 
<option value="a">a</option> 
 
    <option value="b">b</option> 
 
</select> 
 
</div> 
 
<div id="age2">             
 
    <select name="age2"> 
 
    <option value="c">c</option> 
 
    <option value="d">d</option> 
 
    </select></div> 
 
    <div id="age3"> 
 
     <select name="age2"> 
 
     <option value="e">e</option> 
 
     <option value="f">f</option> 
 
    </select></div> 
 
    <div id="age4"> <select> 
 
    <option value="g">g</option> 
 
    <option value="h">h</option> 
 
    </select></div>