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

向右看齐 2024-02-17 18:16 44阅读 0赞

**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）运行时

![Center][]

2）选择【北京】

![Center 1][]

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

![Center 2][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b70286bdea714829942e96dbb6bb19ee.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/23db561cf7b24db7869b36512708f7d3.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/84db1dd5608245ce99ade7e1246dd907.png

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery获得select下拉列表选中项索引

在学习jQuery如何获取select选中的文本和值的时候发现还可以获取其选中项的索引，于是搜索了一下并记录。 $('\selectOne').find('optio

水深无声/ 2024年02月19日 14:22/ 0 赞/ 46 阅读

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

HTML页面结构 <div id="msg"></div> 城市 <select name="city" size="1" id="city">

向右看齐/ 2024年02月17日 18:16/ 0 赞/ 45 阅读

相关 jquery操作select 下拉列表

(注意：此处用的是jquery1.4.1) var index = $('\ddlBrand option:selected').attr('index');//获取选中项的

港控/mmm°/ 2022年09月29日 15:56/ 0 赞/ 203 阅读

相关 jquery操作下拉框select

Jquery操作select标签选中、更改选中、清空、删除和增加： <html xmlns="http://www.w3.org/1999/xhtml"> <

╰半橙微兮°/ 2022年09月22日 11:38/ 0 赞/ 283 阅读

相关 angularjs下拉列表 select

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8">

柔情只为你懂/ 2022年07月14日 22:52/ 0 赞/ 219 阅读

相关获得select下拉选择框的值和文本

$(document).on('change','.optext',function(){ var value = $(this).val()

我会带着你远行/ 2022年07月11日 05:32/ 0 赞/ 227 阅读

相关 jquery-ajax请求后台数据转换json显示在select下拉列表&&jquery获取下拉列表的值和显示内容的方法

======================================jquery-ajax请求后台数据转换json显示在select下拉列表之前运用jquery-a

ゝ一世哀愁。/ 2022年06月06日 04:36/ 0 赞/ 292 阅读

相关 JQuery实现下拉框Select的获取值与文本、动态绑定数据、事件等操作

1、下拉框的应用在网站中下拉框select是经常使用的控件，下面将介绍JQuery实现下拉框select的获取值与文本、动态绑定选项、事件等操作。 1.1 获取选中

不念不忘少年蓝@/ 2021年09月02日 04:10/ 0 赞/ 289 阅读

相关 jquery 实现的select下拉列表

效果如下: ![20200602153152578.png][] html <div class="select_item"> <

浅浅的花香味﹌/ 2021年07月26日 19:05/ 0 赞/ 446 阅读

相关 HTML select 下拉列表

select 下拉列表由 `< select>` 和 `< option>` 标签配合使用生成。下拉列表控件提供可供选择的项，可以选中其中的一项或者多项。

小灰灰/ 2020年05月16日 17:43/ 0 赞/ 874 阅读