Jquery 操作下拉列表select的值，文本，索引等

<div id="msg"></div>
城市
<select name="city" size="1" id="city">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3"  selected="selected">杭州</option>
</select>
区域：
<select name="area" size="1" id="area">
</select>

<script type="text/javascript">
$(function(){

//(5)修改下拉列表选中项--->是错误的写法
// $("#city option[text='上海']").attr("selected", true);

//应改为：
$("#city option:eq(0)").attr("selected", true);     (//$("#city")[0].selectedIndex = 0;)

//select1 值改变事件
$("#city").change(function(){

//1)获得下拉列表的值value
$("#msg").html($(this).val());

//2)获取Select选择的索引值
$("#msg").html($(this).get(0).selectedIndex);

// $("#msg").html($(this).find("option:selected").index());

//(3)获得下拉列表的所有文本text
$("#msg").html($(this).text());

//4)获得下拉列表选择文本text
$("#msg").html($(this).find("option:selected").text());

//6)Select追加一个Option(下拉项)
$("#city").append("<option value='天津'>天津</option>");

//7)删除Select中索引值最大Option(最后一个)
$("#city option:last").remove();

//8)下拉列表的个数
alert($("#city").find("option").length);

//清空第二个下列列表
$("#area").empty();

//判断
if($(this).find("option:selected").text()=="上海"){

//添加第二个下列列表
$("#area").append("<option value='11'>11</option>")
.append("<option value='12'>12</option>").append("<option value='13'>13</option>");

}else if($(this).find("option:selected").text()=="北京"){
$("#area").append("<option value='111'>111</option>")
.append("<option value='112'>112</option>").append("<option value='113'>113</option>");
}

});

});
</script>