使用jQuery对select下拉菜单进行选择操作

最新推荐文章于 2024-10-29 12:21:52 发布
原创 最新推荐文章于 2024-10-29 12:21:52 发布 · 2.3k 阅读 · 6
这篇博客详细介绍了如何使用jQuery对select元素进行各种操作，包括获取和设置option的值与文本，选中特定option，获取select长度，以及添加、删除option等，是JavaScript开发者进行DOM操作的实用教程。

参考：https://www.cnblogs.com/eager/p/7133270.html

 

一、获取第一个option的值/文本值   

$('#XXX option:first').val();
$('#XXX option:first').text();

二、设置第一个option的值/文本值 

$("#XXX option:first").val('aaa');
$("#XXX option:first").text('aaa');

 三、select 选中第一个option（重置select）

$("#XXX option:first").prop("selected", 'selected');

四、最后一个option的值/文本值      

$('#XXX option:last').val();
$('#XXX option:last').text();

五、获取第二个option的值/文本值      


                

        

    






  



  

    

      标签
      

          #JavaScript
      

    

  






        

            

                      
                        
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
jquery及原生js获取select下拉框选中的值示例

				
			

			

				

					12-11
				

			

		

		

			
				
现在有一id=test的下拉框，怎么拿到选中的那个值呢？ 分别使用javascript原生的方法和jquery方法  代码如下: <select id=”test” name=””> <option value=”1″>text1</option> <option value=”2″>text2</option> </select>  一：javascript原生的方法 1:拿到select对象： var myselect=document.getElementById(“test”); 2：拿到选中项的索引：var index=myselect.selectedIndex ; // sele

			
		

	



                

            
              



	

		

			

				
					
如何用jquery选中select或select2 的第n个option

				
			

			

				

					zhaofuqiangmycomm的博客
				

				

					04-15
					
					1741
					
				

			

		

		

			
				
方法1：
$('selector option:eq(1)').attr('selected','selected');

方法2：
$('selector').find('option:eq(1)').attr('selected','selected');

说明：
eq( i ) 方法就是获取指度定索引的对知象，i 从0 开始，分别表道示第一个，第二专个，第三个



如果是select2...

			
		

	



              


  
              

                


	

		

			

				
					
jQuery练习——下拉菜单

				
			

			

				

					颜颜yan_的博客
				

				

					09-12
					
					3905
					
				

			

		

		

			
				
哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。
笔者还是前端的菜鸟，还请大家多多指教呀~

			
		

	





	

		

			

				
					
jquery 下拉菜单

				
			

			

				

					前端开发努力中！
				

				

					10-06
					
					1046
					
				

			

		

		

			
				
纯css写一个好看的下拉列表。

			
		

	



		

			
		



	

		

			

				
					
精通jQuery：操作单选、复选和下拉菜单

					
最新发布

				
			

			

				

					weixin_35762258的博客
				

				

					10-29
					
					1429
					
				

			

		

		

			
				
本文还有配套的精品资源，点击获取
 
 


 简介：jQuery作为一个流行的JavaScript库，极大地简化了网页的交互任务，包括单选按钮、复选框和下拉列表的操作。本文详细探讨了如何使用jQuery来获取单选按钮和复选框的选中状态，以及如何获取和设置下拉列表的值，并提供了动态管理DOM元素的方法。熟练掌握这些基本操作可以极大提高前端开发的效率。
 


 1. jQuery操作单选...

			
		

	





	

		

			

				
					
jQuery实现下拉框应用选择

				
			

			

				

					Timber_wood的博客
				

				

					05-06
					
					622
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
<title>下拉框</title>

<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script type="text...

			
		

	





	

		

			

				
					
JS 操作SELECT选择器（取值，设置选中）

					
热门推荐

				
			

			

				

					zhangxiao0122的博客
				

				

					07-01
					
					4万+
					
				

			

		

		

			
				
每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。一、取值，选中
比如<select class="selector"></select>
1、设置value为pxx的项选中


$(".selector").val("pxx");


2、设置text为pxx的项选中


$(".selector").find("option[text...

			
		

	





	

		

			

				
					
jquery操作select(取值，设置选中）

				
			

			

				

					
				

				

					09-03
					
					124
					
				

			

		

		

			
				
摘自：http://blog.csdn.net/nairuohe/article/details/6307367
每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。
比如<select class="selector"></select>
1、设置value为pxx的项选中
 $(".selector").v...

			
		

	





	

		

			

				
					
如何用jQuery获得select的值

				
			

			

				

					zxxxxxxxxxxxz的博客
				

				

					08-12
					
					8038
					
				

			

		

		

			
				
1.获取第一个option的值
$(’#test option:first’).val();
2.最后一个option的值
$(’#test option:last’).val();
3.获取第二个option的值
$(’#test option:eq(1)’).val();
4.获取选中的值
$(’#test’).val();
$(’#test option:selected’).val();
...

			
		

	





	

		

			

				
					
layui问题之模拟select点击事件

				
			

			

				

					yan263364的博客
				

				

					01-05
					
					2万+
					
				

			

		

		

			
				
一、问题

    不操作页面，实现模拟select的事件，即，自动出现下拉框，自动点击下拉框的值，select文本框的值随之改变




二、经过

    刚开始查看layui官方文档，发现仅仅只是有select监听事件，即：




form.on('select(filter)', function(data){
  console.log(data.elem); //得到select原始

			
		

	





	

		

			

				
					
select设置选中项/select的级联

				
			

			

				

					
				

				

					09-10
					
					663
					
				

			

		

		

			
				
一、selected="selected" 
HTML通过<select>的属性来设置选中项，
此方法也可以在动态语言在后台根据需要控制输出结果。

<select ID='sel' class="form-control width150">  
 <option value="1">开启</option>  
<opt...

			
		

	





	

		

			

				
					
jquery对radio、checkbox、select的操作

				
			

			

				

					chenhua4088的专栏
				

				

					04-15
					
					449
					
				

			

		

		

			
				
1、获取radio的值
$("input[name='name']:checked").val();

2、给radio赋值
$("#Radio1").attr('checked', 'checked');

3、checkbox
$("[name='checkbox']").attr("checked",'true');//全选

$("[name='checkbox']").

			
		

	





	

		

			

				
					
jQuery操作select

				
			

			

				

					weixin_43916501的博客
				

				

					04-14
					
					256
					
				

			

		

		

			
				
给select的option 追加值
$("#mySelect).append("<option value='"+i+"'>"+ j+ "</option>");																										

移除所有的option
$("#mySelect").find("option").remove();																										
...

			
		

	





	

		

			

				
					
jquery 操作各个 dom

				
			

			

				

					openCpu
				

				

					12-26
					
					298
					
				

			

		

		

			
				
比如&lt;select class="selector"&gt;&lt;/select&gt;

1、设置value为pxx的项选中

 $(".selector").val("pxx");

2、设置text为pxx的项选中

 $(".selector").find("option[text='pxx']").attr("selected",true)

			
		

	





	

		

			

				
					
jQuery的一些用法

				
			

			

				

					博客写得好，技术好，才是真的好
				

				

					07-25
					
					257
					
				

			

		

		

			
				
jQuery获取Select选择的Text和 Value(转) 
jQuery.trigger() 函数详解 
jQuery和ajax实现下拉菜单级联操作

			
		

	



              




          





        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值