как показать/скрыть дивы по выберите (JQuery)

Question

мой код:.

<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> 

, что я хочу, чтобы показать DIV # Form1, когда выберите вариант 1 и скрыть form2 + form3 или выберите вариант 2 шоу DIV # form2 и скрыть form1 + Form2

Answer 1

$('#select').change(function() { 
    $('#form1, #form2, #form3').hide(); 
    $('#form' + $(this).find('option:selected').attr('id')).show(); 
}); 

Обратите внимание, что идентификаторы не должны начинаться с цифр, но выше, должны это сделать.

Answer 2

Что-то вроде этого?

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

Answer 3

Не было бы лучше спрятать ранее показанный div? Итак;

var selection = 0; 
$('#select').change(function() { 
    $('#form' + selection).hide(); 
    selection = $(this).val(); 
    $('#form' + selection).show(); 
}); 

Обратите внимание, что идентификаторы не должны начинаться с цифр, но вышеуказанное должно это делать.

Answer 4

Если ваши формы большие, вы можете поместить их в отдельные файлы, как это,

$(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> 

Answer 5

Лучше версия:

$('#select').change(function() { 
    $('div').not('#form' + $(this).find('option:selected').attr('id')).hide(); 
    $('#form' + $(this).find('option:selected').attr('id')).show(); 
});