select下拉框学习总结

最新推荐文章于 2024-08-09 21:30:00 发布
最新推荐文章于 2024-08-09 21:30:00 发布
阅读量106 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：https://yq.aliyun.com/articles/512937
版权

关于下拉框的一些简单使用，希望对您的学习有所帮助 

 
 
 
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
  5.     <title>select学习-之传统JS</title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript"> 
  8.         /**根据游戏显示游戏对应的相应的区！！*/ 
  9.         function gameselect() { 
  10.             //索引，减一是为了忽略第一个“请选择游戏” 
  11.             //var index = document.getElementById("gameselect").selectedIndex - 1; 
  12.             /*****------把上面一句代码换成Jquery为：-------****/ 
  13.             var index = $("#gameselect").get(0).selectedIndex - 1; 
  14.              
  15.             //清除所选过的 
  16.         //  document.getElementById("gameareaselect").options.length = 1; 
  17.             /**------把上面一句代码换成Jquery为：---*/ 
  18.             $("#gameareaselect").get(0).options.length = 1; 
  19.              
  20.              
  21.             //声明一个数组做测试数据 
  22.             var gameareaArray = new Array(); 
  23.             gameareaArray[0] = ["坦克区1","坦克区2"]; 
  24.             gameareaArray[1] = ["激战区1","激战区2","激战区3","激战区4"]; 
  25.             gameareaArray[2] = ["功夫英雄区1","功夫英雄区2","功夫英雄区3"]; 
  26.              
  27.             for(var i in gameareaArray[index]) { 
  28.                 var option = new Option(gameareaArray[index][i],gameareaArray[index][i]); 
  29.                 document.getElementById("gameareaselect").options.add(option); 
  30.             } 
  31.         } 
  32.  
  33.         function gameareaSelect() { 
  34.             var value = document.getElementById("gameareaselect").value; 
  35.             alert("下拉框的value值为：" + value ); 
  36.              
  37.             //下面我们去拿显示的值 
  38.         //  var gamearea = document.getElementById("gameareaselect"); 
  39.         //  var showValue = gamearea.options[gamearea.selectedIndex].text; 
  40.             /**---把上面两行代码换成下面Jquery形式--*/ 
  41.             var  index = $("#gameareaselect").get(0).selectedIndex ; 
  42.             var showValue = $("#gameareaselect").get(0).options[index].text; 
  43.              
  44.             alert("显示的值为：" + showValue); 
  45.         } 
  46.     </script> 
  47. </head> 
  48. <body> 
  49.     <select name="" id="gameselect" οnchange="gameselect()"> 
  50.         <option value="00">--请选择游戏--</option> 
  51.         <option value="10">坦克世界</option> 
  52.         <option value="20">激战2</option> 
  53.         <option value="30">功夫英雄</option> 
  54.     </select> 
  55.     <select name="" id="gameareaselect" οnchange="gameareaSelect()"> 
  56.         <option value="00">--请选择区--</option> 
  57.     </select> 
  58. </body> 
  59. </html> 
 
 
2.
 
 
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
  5.     <title>select学习-之传统JS</title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript"> 
  8.         /**根据游戏显示游戏对应的相应的区！！*/ 
  9.         function gameselect() { 
  10.             //var index = document.getElementById("gameselect").value; 
  11.             /******-把上面的代码改成Jquery--******/ 
  12.             var index = $("#gameselect").get(0).value; 
  13.              
  14.             //清除所选过的 
  15.         //  document.getElementById("gameareaselect").options.length = 1; 
  16.             /*****------把上面的代码换成Jquery代码------*****/ 
  17.             $("#gameareaselect").get(0).options.length = 1; 
  18.              
  19.             //声明一个数组做测试数据 
  20.             var gameareaArray = new Array(); 
  21. //          gameareaArray[0] = ["坦克区1","坦克区2"]; 
  22. //          gameareaArray[1] = ["激战区1","激战区2","激战区3","激战区4"]; 
  23. //          gameareaArray[2] = ["功夫英雄区1","功夫英雄区2","功夫英雄区3"]; 
  24.             //数组的下标可以为字符串，比如换成下面的 
  25.              
  26.             gameareaArray['tanke'] = ["坦克区1","坦克区2"]; 
  27.             gameareaArray['jizhan'] = ["激战区1","激战区2","激战区3","激战区4"]; 
  28.             gameareaArray['gongfu'] = ["功夫英雄区1","功夫英雄区2","功夫英雄区3"]; 
  29.              
  30.             for(var i in gameareaArray[index]) { 
  31.                 var option = new Option(gameareaArray[index][i],gameareaArray[index][i]); 
  32.             //  var option = new Option(gameareaArray[index][i],"00000"); 
  33.                 document.getElementById("gameareaselect").options.add(option); 
  34.             } 
  35.         } 
  36.  
  37.         function gameareaSelect() { 
  38.             var value = document.getElementById("gameareaselect").value; 
  39.             alert("下拉框的value值为：" + value ); 
  40.              
  41.             //下面我们去拿显示的值 
  42.         //  var gamearea = document.getElementById("gameareaselect"); 
  43.         //  var showValue = gamearea.options[gamearea.selectedIndex].text; 
  44.                 /**---把上面两行代码换成下面Jquery形式--*/ 
  45.             var  index = $("#gameareaselect").get(0).selectedIndex ; 
  46.             var showValue = $("#gameareaselect").get(0).options[index].text; 
  47.              
  48.             alert("显示的值为：" + showValue); 
  49.         } 
  50.          
  51.         /**删除游戏“功夫英雄”*/ 
  52.         function delGongfu() { 
  53.             $("#gameselect").get(0).remove(3); 
  54.         } 
  55.     </script> 
  56. </head> 
  57. <body> 
  58.     <select name="" id="gameselect" onchange="gameselect()"> 
  59.         <option value="00">--请选择游戏--</option> 
  60.         <option value="tanke">坦克世界</option> 
  61.         <option value="jizhan">激战2</option> 
  62.         <option id="gongfu" value="gongfu">功夫英雄</option> 
  63.     </select> 
  64.     <select name="" id="gameareaselect" onchange="gameareaSelect()"> 
  65.         <option value="00">--请选择区--</option> 
  66.     </select> 
  67.      
  68.     <input type="button" value="删除功夫英雄" onclick="delGongfu()" /> 
  69. </body> 
  70. </html> 
 
 
3.
 
 
 
 
 
 
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  5.     <title>jquery之select学习---有自己封装的对select的操作</title> 
  6.     <script type="text/javascript" src="jquery1.5.js"></script> 
  7.     <script type="text/javascript" src="jquery_select.js"></script> 
  8.     <script type="text/javascript"> 
  9. /*      $(document).ready(function(){ 
  10.             alert(1); 
  11.         }); 
  12.          
  13.          
  14.         jQuery(document).ready(function(){ 
  15.             alert(2); 
  16.         }); 
  17. */ 
  18.  
  19.         //自己创建jQuery简写 
  20.         var $j = jQuery.noConflict(); 
  21.         $j(document).ready(function(){ 
  22.              
  23.             //1.添加options 
  24.             $j("#bt").click(function(){ 
  25.                 $j("#demo").addOption("请选择","00"); 
  26.                 $j("#demo").addOption("China","china"); 
  27.                 $j("#demo").addOption("USA","usa"); 
  28.                  
  29.                 //换成Javascript代码如下 
  30.                 document.getElementById("demo").options.add(new Option("Franch","france")); 
  31.             }); 
  32.              
  33.             //2.改变options的个数 
  34.             $j("#bt1").click(function(){ 
  35.                 //$j("#demo").clearAll(); 
  36.                 //上面一行代码换成JavaScript 
  37.                 //document.getElementById("demo").options.length = 1; 
  38.                  
  39.                 //$j("#demo").options.length = 0; 记得这么写是不对的。。。。。应该是下面的写法 
  40.                 //$j("#demo").get(0).options.length = 1;     
  41.                  
  42.                 $j("#demo").get(0).remove(3);//删除索引为3的option 
  43.             }); 
  44.              
  45.             //3.确定options的个数 
  46.             $j("#bt2").click(function(){ 
  47.                 //  var size = $j("#demo").optionssize(); 
  48.                 //换成javascript为： 
  49.                 var size = document.getElementById("demo").options.length; 
  50.                 alert(size); 
  51.             }); 
  52.              
  53.         }); 
  54.  
  55.         //4.确定当前是第几个options 
  56.         function getCount() { 
  57.             //  var index = document.getElementById("demo").selectedIndex; 
  58.             //换成对应的jQuery代码为： 
  59.             var index = $j("#demo").get(0).selectedIndex; 
  60.              
  61.             var text = $j("#demo").get(0).options[index].text; 
  62.          
  63.             alert(index + ":" + text); 
  64.         } 
  65.  
  66. /* 
  67.         jQuery(document).ready(function($){ 
  68.             $("#bt").click(function(){ 
  69.                 alert(1); 
  70.             }); 
  71.         }); 
  72. */ 
  73.     </script> 
  74. </head> 
  75. <body> 
  76.     <input type="button" value="触发" id="bt"/> 
  77.     <input type="button" value="消失" id="bt1"/> 
  78.     <input type="button" value="options的个数" id="bt2"/> 
  79.      
  80.     <select name="demo" id="demo" onchange="getCount()"> 
  81.          
  82.     </select> 
  83. </body> 
  84. </html> 
 
 
4.
 
 
 
 
  1. //get select size 
  2. jQuery.fn.optionssize = function(){ 
  3.     return jQuery(this).get(0).options.length; 
  4. } 
  5. //get selected index 
  6. jQuery.fn.getSelectedIndex = function(){ 
  7.     return jQuery(this).get(0).selectedIndex; 
  8. } 
  9. jQuery.fn.getSelectedOption = function(){ 
  10.     var index = this.getSelectedIndex(); 
  11.     return jQuery(this).get(0).options[index]; 
  12. } 
  13. //get selected text 
  14. jQuery.fn.getSelectedText = function(){ 
  15.     if(this.optionssize() == 0)  return ""; 
  16.     else{ 
  17.         var index = this.getSelectedIndex(); 
  18.         return jQuery(this).get(0).options[index].text; 
  19.     } 
  20. } 
  21. //get selected attr 
  22. jQuery.fn.getSelectedAttr = function(attrName){ 
  23.     if(this.optionssize() == 0)  return ""; 
  24.     else{ 
  25.         var index = this.getSelectedIndex(); 
  26.         return jQuery(jQuery(this).get(0).options[index]).attr(attrName); 
  27.     } 
  28. } 
  29. //get selected value 
  30. jQuery.fn.getSelectedValue = function(){ 
  31.     if(this.optionssize() == 0) 
  32.         return ""; 
  33.     else   
  34.         return jQuery(this).val(); 
  35. }  
  36. //set option value select 
  37. jQuery.fn.setSelectedValue = function(value){   
  38.     jQuery(this).get(0).value = value;   
  39. }   
  40.    
  41. //set option text first select 
  42. jQuery.fn.setSelectedText = function(text)   
  43. {   
  44.     var isExist = false;   
  45.     var count = this.optionssize();   
  46.     for(var i=0;i<count;i++)   
  47.     {   
  48.         if(jQuery(this).get(0).options[i].text == text)   
  49.         {   
  50.             jQuery(this).get(0).options[i].selected = true;   
  51.             isExist = true;   
  52.             break;   
  53.         }   
  54.     }   
  55. }   
  56. //set selected index 
  57. jQuery.fn.setSelectedIndex = function(index)   
  58. {   
  59.     var count = this.optionssize();       
  60.     if(index >= count || index < 0)   
  61.     {   
  62.         jQuery(this).get(0).selectedIndex = -1; 
  63.     }   
  64.     else   
  65.     {   
  66.         jQuery(this).get(0).selectedIndex = index;   
  67.     }   
  68. }   
  69. //check select has value 
  70. jQuery.fn.isExistItem = function(value)   
  71. {   
  72.     var isExist = false;   
  73.     var count = this.optionssize();   
  74.     for(var i=0;i<count;i++)   
  75.     {   
  76.         if(jQuery(this).get(0).options[i].value == value)   
  77.         {   
  78.             isExist = true;   
  79.             break;   
  80.         }   
  81.     }   
  82.     return isExist;   
  83. }   
  84. //add select value,text if(this has alert) 
  85. jQuery.fn.addOption = function(text,value)   
  86. {   
  87.     if(this.isExistItem(value))   
  88.     {   
  89.          
  90.     }   
  91.     else   
  92.     {   
  93.         jQuery(this).get(0).options.add(new Option(text,value));   
  94.     }   
  95. }   
  96. //delete select by value if(this has not alert) 
  97. jQuery.fn.removeItem = function(value)   
  98. {       
  99.     if(this.isExistItem(value))   
  100.     {   
  101.         var count = this.optionssize();           
  102.         for(var i=0;i<count;i++)   
  103.         {   
  104.             if(jQuery(this).get(0).options[i].value == value)   
  105.             {   
  106.                 jQuery(this).get(0).remove(i);   
  107.                 break;   
  108.             }   
  109.         }           
  110.     }   
  111.     else   
  112.     {   
  113.           
  114.     }   
  115. }   
  116. //delete select by index 
  117. jQuery.fn.removeIndex = function(index)   
  118. {   
  119.     var count = this.optionssize();   
  120.     if(index >= count || index < 0)   
  121.     {   
  122.          
  123.     }   
  124.     else   
  125.     {   
  126.         jQuery(this).get(0).remove(index);   
  127.     }   
  128. }   
  129. //delete select by seleced 
  130. jQuery.fn.removeSelected = function()   
  131. {   
  132.     var index = this.getSelectedIndex();   
  133.     this.removeIndex(index);   
  134. }   
  135. //clear all options 
  136. jQuery.fn.clearAll = function()   
  137. {   
  138.     jQuery(this).get(0).options.length = 0;   
  139. }   
 
 
具体例子请去下载：select总结 
 
 
 
  
 
 
 
 
 
    
  
 
        本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/1151983 
   ，如需转载请自行联系原作者 
  
 
  
 
   
 
  
 
  
 
   
 
  
 
 
 
 
 
  
 
 
 
 
 
  
 
 
 


                

        

        




    




    

      

        

            

              
                
                  weixin_33872660
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
[学习心得][JavaScript][Html][Select]下拉选择框Select的使用合集

				
			

			

				

					jason_56的博客
				

				

					05-01
					
					1477
					
				

			

		

		

			
				
一、新建一个JavaScript文件

新建一个MyJavaScript.js文件，将以下代码复制并保存。


var ddlHandler = {};

//清空objDdl中的所有项，objDdl为元素ID（下同）
    ddlHandler.truncate = function (objDdl) {
        objDdl.options.length = 0;
}
//清空objDdl中的所有Option（完善版）
    ddlHandler.optionClear = functio.

			
		

	



                

              
                



	

		

			

				
					
前端下拉框select二级联动显示

				
			

			

				

					qq_40410916的博客
				

				

					03-15
					
					1478
					
				

			

		

		

			
				
html部分
一级下拉框：
<select id="gametype" onchange="changegame()">
	<option value="">--游戏类型--</option>
</select>
<br>
二级下拉框：
<select id="gamelist">
	<option value=""&g...

			
		

	



                


  
              

                


	

		

			

				
					
（下拉框系列4）通过学习下拉框系列，自己写的下拉框

				
			

			

				

					学而不思则罔，思而不学则殆
				

				

					12-15
					
					533
					
				

			

		

		

			
				
这几天在做项目时，遇到在添加页面用做的下拉框，在修改页面不知道怎么调用形成下拉框。所以查了百度，找到以上方法，整合了一下，根据自己的情况，试着写了一下，代码中的INFORMATION是model类。
因为楼主用的数据库优先，所以是在Controller中定义的类。
Controller代码为：
public class SelectInfo
        {
            pub

			
		

	





	

		

			

				
					
Select2下拉框总结（全）

				
			

			

				

					ppxin的专栏
				

				

					06-05
					
					4158
					
				

			

		

		

			
				
select2，利用ajax高效查询大数据列表（可搜索、可分页）

https://www.cnblogs.com/keyi/p/6971143.html

-----------------------------------------------------------------------------------------------------------


$('input#em...

			
		

	



		

			
		



	

		

			

				
					
获取select的value值

				
			

			

				

					kuaikuai_945的博客
				

				

					10-21
					
					659
					
				

			

		

		

			
				
<select id="s_type" name="s_type" onChange="changeSelect(this.options[this.options.selectedIndex].value);">

代码：this.options[this.options.selectedIndex].value


			
		

	





	

		

			

				
					
javascript中select下拉框的用法总结

				
			

			

				

					10-23
				

			

		

		

			
				
本文将详细介绍`select`下拉框的用法，以及在实际开发中如何与后台进行数据交互。  ### 1. 获取选中的option值  当用户在下拉框中选择一个选项时，我们通常需要获取选中的`option`的值。这可以通过监听`onchange`...

			
		

	





	

		

			

				
					
Vue.js仿Select下拉框效果

				
			

			

				

					10-15
				

			

		

		

			
				
总结一下，Vue.js实现仿Select下拉框效果的关键步骤包括： 1. 创建自定义组件。 2. 使用props传递数据。 3. 使用事件处理机制通信。 4. 数据绑定和条件渲染。  通过这个实例，我们可以深入理解Vue.js组件的工作原理...

			
		

	





	

		

			

				
					
jQuery Select下拉框美化代码

				
			

			

				

					06-10
				

			

		

		

			
				
总结来说，"jQuery Select下拉框美化代码"是一个旨在改善网页交互体验的解决方案，通过结合jQuery和自定义插件，实现了在所有浏览器中样式统一的下拉框。它不仅提升了界面美观度，还提供了多种实用功能，是前端开发...

			
		

	





	

		

			

				
					
解决element ui select下拉框不回显数据问题的解决

				
			

			

				

					10-17
				

			

		

		

			
				
当使用`el-select`组件绑定数据模型（`v-model`）时，下拉框在编辑表单时无法显示已选择的选项。开发者可能发现，虽然数据已经正确地从服务器获取，但在界面上并未正确地回显到下拉框中。这通常是由于数据类型不匹配...

			
		

	





	

		

			

				
					
获取select标签选中option的value值

				
			

			

				

					mclt2017的博客
				

				

					05-12
					
					5941
					
				

			

		

		

			
				
例:

<div class="layui-input-block">
   <select name="gncode" id="gncode" >
    <option value=""></option>
    <option value="1">增加</option>
    <option value="2">修改</option>
    <option ...

			
		

	





	

		

			

				
					
下拉框 切换一个下拉框 另一个下拉框做相应的改变

				
			

			

				

					weixin_43942765的博客
				

				

					11-13
					
					1492
					
				

			

		

		

			
				
昨夜小编看了一下腾讯课堂的课程觉得甚好，于是今天决定要将代码敲一遍，废话不多说，让我们一睹为快


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉框</title>
		<style>
			.game_out{
				p...

			
		

	





	

		

			

				
					
实现 select中指定option选中触发事件

					
热门推荐

				
			

			

				

					weixin_39450145的博客
				

				

					11-03
					
					1万+
					
				

			

		

		

			
				

11111，例1


我们在用到下拉列表框select时，需要对选中的&lt;option&gt;选项触发事件，其实&lt;option&gt;本身没有触发事件方法，我们只有在select里的onchange方法里触发。

当我们触发select的双击事件时，用ondblclick方法。

当我们要取得select的选中事件时，用document.all['name'].value来获取，其中n...

			
		

	





	

		

			

				
					
下拉列表框实现图像切换

				
			

			

				

					Bule_daze的博客
				

				

					03-15
					
					3156
					
				

			

		

		

			
				
下拉列表框实现图像切换。代码如下所示：




<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<script language="javascript">
		function $(id) {return d...

			
		

	





	

		

			

				
					
select onchange事件的使用

				
			

			

				

					weixin_30394251的博客
				

				

					08-14
					
					365
					
				

			

		

		

			
				
<select name="expireDay" id="expireDay" class="form-control" onchange="searchChange(this.options[this.options.selectedIndex].value);"><!--                                             <opt...

			
		

	





	

		

			

				
					
05_ Electron 自定义菜单、主进程与渲染进程通信

					
最新发布

				
			

			

				

					所学所思
				

				

					08-09
					
					462
					
				

			

		

		

			
				
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。

			
		

	





	

		

			

				
					
【Vue3】图片未加载成功前占位

				
			

			

				

					菜就多练
				

				

					08-08
					
					258
					
				

			

		

		

			
				
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " />  < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {

			
		

	





	

		

			

				
					
社交媒体分享预览图片和内容修改

				
			

			

				

					wangweiscsdn的博客
				

				

					08-06
					
					221
					
				

			

		

		

			
				
社交媒体分享链接时的预览图片和内容

			
		

	





	

		

			

				
					
Typescript配置文件(tsconfig.json)详解系列六：allowImportingTsExtensions

				
			

			

				

					zzyp1927314的博客
				

				

					08-05
					
					495
					
				

			

		

		

			
				
如果不使用的时候，在导入文件的时候需要加上typescript编译后的文件后缀。如果使用了就不能输出编译文件，只能输出声明文件（*.d.ts）。

			
		

	





	

		

			

				
					
el-select 下拉框

				
			

			

				

					09-20
				

			

		

		

			
				
el-select 下拉框是一个基于Element UI框架提供的组件，用于实现下拉选择的功能。通过el-select可以实现以下操作：
- 添加搜索属性：使用filterable属性可以将下拉框设置为可搜索的，用户可以输入关键字进行筛选。
- 下拉框切换方法：可以使用v-model指令来绑定下拉框的选中值，通过改变绑定的数据可以实现下拉框的切换。
- 下拉选项显示：通过el-option组件可以定义下拉框中的选项，可以设置选项的label、value等属性，同时可以通过v-for指令循环生成多个选项。

在给定的引用中，还介绍了el-select下拉框的多选以及筛选方法实现高亮显示的方法。通过设置filter-method属性可以定义自定义的筛选方法，可以根据输入的关键字对下拉选项进行筛选。同时，还提供了setHighlight方法来实现匹配文字的高亮显示。

以上就是el-select下拉框的基本使用及一些常用功能的介绍。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值