Javascript 基于图元单击更改“选择”选项值

如果单击任何列表项，如何更新元素中的值？ 还有，关于优化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>

A.
B
C

a
b
c

$（'#region'）。更改（函数（）{
$（'.stores'）.fadeOut（）；
$（'#'+$（this.val（））.delay（300.fadeIn（）；
});    
$（“#states>li”）。单击（函数（）{
$（'.stores'）.fadeOut（）；
$（'#'+$（this.attr（'class'））.delay（300.fadeIn（）；
});   
a
b
c

使用以下方法：

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

---

演示：

“更新元素中的值”-更新哪个值？