wie zum Anzeigen / Verbergen divs durch wählen. (jquery)
Frage
mein Code:
<select id="select">
<option id="1" value="thai language">option one</option>
<option id="2" value="eng language">option two</option>
<option id="3" value="other language">option three</option>
</select>
<div id="form1">content here</div>
<div id="form2">content here</div>
<div id="form3">content here</div>
, was ich will, ist div # form1 zu zeigen, wenn wählen Sie die Option 1 und verstecken form2 + form3 oder Wählen Sie Option 2 zeigen div # form2 und verstecken form1 + form2
Lösung
$('#select').change(function() {
$('#form1, #form2, #form3').hide();
$('#form' + $(this).find('option:selected').attr('id')).show();
});
Sie beachten Sie, dass IDs nicht mit Zahlen beginnen sollte, aber die oben sollte es tun.
Andere Tipps
Wenn Sie Ihre Formulare groß sind, können Sie sie in separaten Dateien so sagen,
$(document).ready(function() {
$('#select').change(function() {
$("#myform").load(this.value);
});
});
<select id="select">
<option value="blank.htm">Select A Form</option>
<option value="test1.htm">option one</option>
<option value="test2.htm">option two</option>
<option value="test3.htm">option three</option>
</select>
<div id="myform" ></div>
So etwas wie das?
var optionValue = $("#select").val();
$('#form1, #form2, #form3').hide();
switch(optionValue)
{
case 1:
$("#form1").show();
break;
case 2:
$("#form2").show();
break;
case: 3:
$("#form3").show();
break;
}
Wäre es nicht besser, nur die zuvor gezeigt div zu verbergen? Also;
var selection = 0;
$('#select').change(function() {
$('#form' + selection).hide();
selection = $(this).val();
$('#form' + selection).show();
});
Sie beachten Sie, dass IDs nicht mit Zahlen beginnen sollte, aber die oben sollte es tun.
Bessere Version:
$('#select').change(function() {
$('div').not('#form' + $(this).find('option:selected').attr('id')).hide();
$('#form' + $(this).find('option:selected').attr('id')).show();
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow