Select에 의해 divs를 보여 주거나 숨기는 방법. (jQuery)
문제
내 코드 :
<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>
내가 원하는 것은 옵션 1을 선택할 때 div #form1을 표시하고 form2+form3를 숨기거나 옵션 2 show div #form2를 선택하고 form1+form2를 숨기는 것입니다.
해결책
$('#select').change(function() {
$('#form1, #form2, #form3').hide();
$('#form' + $(this).find('option:selected').attr('id')).show();
});
ID는 숫자로 시작해서는 안되지만 위의 내용은이를 수행해야합니다.
다른 팁
양식이 크면 이와 같은 별도의 파일에 넣을 수 있습니다.
$(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>
이 같은?
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;
}
이전에 표시된 DIV 만 숨기는 것이 더 낫지 않습니까? 그래서;
var selection = 0;
$('#select').change(function() {
$('#form' + selection).hide();
selection = $(this).val();
$('#form' + selection).show();
});
ID는 숫자로 시작해서는 안되지만 위의 내용은이를 수행해야합니다.
더 나은 버전 :
$('#select').change(function() {
$('div').not('#form' + $(this).find('option:selected').attr('id')).hide();
$('#form' + $(this).find('option:selected').attr('id')).show();
});
제휴하지 않습니다 StackOverflow