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

HTML页面结构

<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>

JS

<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>

效果

1）运行时

2）选择【北京】

3）单击【确定】添加【区域】