根據元素單擊更改選擇選項值

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/