요소 선택시 기본 옵션 값 변경

Question

목록 항목 중 하나를 클릭하면 요소 내의 값을 어떻게 업데이트 할 수 있습니까? 또한 js를 최적화하는 데 필요한 팁이 있습니까?

<select name="region" id="region"> 
    <option value=""></option> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

<ul id="states"> 
    <li class="a">a</li> 
    <li class="b">b</li> 
    <li class="c">c</li> 
</ul> 

<script> 
$('#region').change(function(){ 
    $('.stores').fadeOut(); 
    $('#' + $(this).val()).delay(300).fadeIn(); 
});  
$('#states > li').click(function(){ 
    $('.stores').fadeOut(); 
    $('#' + $(this).attr('class')).delay(300).fadeIn(); 
}); 
</script> 

<p id="a" class="stores">a</p> 
<p id="b" class="stores">b</p> 
<p id="c" class="stores">c</p> 

Answer 1

사용 다음

$("#states > li").click(function() { 
    $("option").removeAttr("selected"); 
    var value = $(this).attr('class'); 
    $("option[value='"+value+"']").attr("selected","selected"); 
}); 

데모 :http://jsfiddle.net/ZyVTH/1/