Jquery实现select中option的增删改

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量950 收藏
点赞数
分类专栏： JavaSript 文章标签： jquery button function input javascript xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongxyt2/article/details/7325950
版权
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery实现select中option的增删改
</title>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
    $(function () {
        $("#Button1").click(function () {
            $("#opt").get(0).selectedIndex = 1; //selectedIndex不能写成SelectedIndex
        })

        $("#Button2").click(function () {
            //$("#opt option[text='Item3']").attr("selected", true);
            $("#opt").val(3);
        });

        $("#Button3").click(function () {
            //$("#opt").append("<option value='Value'>Text</option>"); //创建不带参数的option
            var $option = $("<option" + " value=" + $(".txt").val() + ">" + $(".txt").val() + "</option>");
            $("#opt").append($option);
        });

        $("#Button4").click(function () {
            $("#opt option:last").remove();
        });

        $("#Button5").click(function () {
            var $option = $("<option" + " value=" + $(".txt").val() + ">" + $(".txt").val() + "</option>");
            var index = $("#opt").get(0).selectedIndex;
            alert(index);
            $("#opt option:eq("+index+")").replaceWith($option);//eq中有参数
        });
    });
</script>
</head>
<body>
  <div>
         <select id="opt" multiple="multiple" style="height:96px;width:85px">
                 <option value="1">Item1</option>
                 <option value="2">Item2</option>
                 <option value="3">Item3</option>
                 <option value="4">Item4</option>
                 <option value="5">Item5</option>
                 <option value="6">Item6</option>
         </select>
         <p id="p1"></p>
     </div>
     <div>
         <input type="text" class="txt"/>
         <p id="p2">
             <input id="Button1" type="button" value="设置索引值为1的项被选中" />
             <input id="Button2" type="button" value="设置Select的Value值为3的项被选中" />
                 <input id="Button3" value="Add" type="button" />
                 <input id="Button4" value="Delete" type="button" />
                 <input id="Button5" value="Update" type="button" /></p>
     </div>
</body>
</html>

JS编辑图片
:http://www.360doc.com/content/10/0214/19/537626_15831728.shtml









                

        

        

    




    

      

        

            

              
                
                  xiongxyt2
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
jquery删除select中所有option选项

				
			

			

				

					u010090328的专栏
				

				

					11-28
					
					4246
					
				

			

		

		

			
				
在项目中碰到option列表没有清空，一直累加，关于每触发一次，清空对应对表，再取值赋值到option中
select中所有option选项如何删除，本文使用jquery简单实现下，有此需求的朋友可以参考下，希望对大家有所帮助


<select
 id="search"> 
baidu 
sogou 
 



清空： 



$("#search").find(

			
		

	



                

              
                



	

		

			

				
					
jquery select 赋值 选中 修改页面

				
			

			

				

					今日记一事，明日悟一理，积久而成学。
				

				

					02-26
					
					848
					
				

			

		

		

			
				
如上图：渠道的的加载，以及初始化时选中的值 关键代码： $("#输入ID").val('option值');

$(function(){
  //方法一：onload時候 获取渠道信息
   $.ajax({
     type:'post',
     url:'${ctx}/dictionary/listChannel.do',
     data:'',
     data

			
		

	



                


  
              

                


	

		

			

				
					
jQuery增加、删除及修改select option的方法

				
			

			

				

					11-23
				

			

		

		

			
				
本文实例讲述了jQuery增加、删除及修改select option的方法。分享给大家供大家参考，具体如下：
jQuery获取Select选择的Text和Value:
1.

//获取Select选择的Text
var checkText=jQuery("#select_id").find("option:selected").text(); 

2.

//获取Select选择的option Value
var checkValue=jQuery("#select_id").val();

3.

//获取Select选择的索引值
var checkIndex=jQuery("#select

			
		

	





	

		

			

				
					
JQuery动态添加Select的Option元素实现方法

				
			

			

				

					01-21
				

			

		

		

			
				
如下所示：

var selector=$('<select></select>');
for(var i=0;i'+i+'');
} 
以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

			
		

	



		

			
		



	

		

			

				
					
JS对select控件option选项的增删改查示例代码

				
			

			

				

					10-26
				

			

		

		

			
				
Javascript操作select是表单中比较常见的，大家可以在网上搜索到很多的相关资料，接下来为大家详细介绍下，JS动态操作select中的各种方法，感兴趣的朋友可以参考下

			
		

	





	

		

			

				
					
用javascript动态整体替换修改下拉列表option的内容

				
			

			

				

					cindysaj的专栏
				

				

					12-03
					
					1565
					
				

			

		

		

			
				



	function test() {
		var childRet = document.getElementById('sel');
		for (var i = childRet.childNodes.length-1; i >= 0; i--) {
			childRet.removeChild(childRet.childNodes.item(i));
		}
	
...

			
		

	





	

		

			

				
					
html对象之options的增删改

				
			

			

				

					qq_41566366的博客
				

				

					11-12
					
					630
					
				

			

		

		

			
				
如果，如果给一个select增加option你会怎么办？

大部分人会通过getElementById获取到select这个dom，然后通过append方法增加"<option>XXX<option>"这样的方式。

那么有没有更简单的直接操作dom的方法呢？有！


var obj=document.getElementById('element'); 
var index =obj.selectedIndex//选中的option的索引值
obj.options.remove(i

			
		

	





	

		

			

				
					
Jquery动态添加、删除select的option选项

					
热门推荐

				
			

			

				

					chenguixu的博客
				

				

					05-16
					
					1万+
					
				

			

		

		

			
				
<select id="orderItemQTY"></select>

$("#orderItemQTY")[0].options.length=0;//删除所有选项，一定要加[0]，Don't know why ? 知道的快留言吧！！！

for(var i=1;i<=qty;i++){
 var options="<option value='...

			
		

	





	

		

			

				
					
jQuery实现Select左右复制移动内容

				
			

			

				

					10-21
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用jQuery来实现Select元素之间的内容复制和移动功能。这个功能在许多用户界面中都有应用，比如多选设置、数据过滤等。以下是对给定代码的详细解释和扩展：  首先，我们需要引入jQuery...

			
		

	





	

		

			

				
					
jquery实现select带模糊搜索下拉选择框

				
			

			

				

					11-10
				

			

		

		

			
				
 在 `custom.js` 中，我们将编写 `jQuery` 代码来实现模糊搜索功能。首先，我们需要监听 `input` 事件，当用户在输入框中输入时，过滤下拉选项：  ```javascript  $('#searchable-select').on('input', function() {...

			
		

	





	

		

			

				
					
jquery获取select,option所有的value和text的实例

				
			

			

				

					10-20
				

			

		

		

			
				
下面小编就为大家带来一篇jquery获取select,option所有的value和text的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
javascript 支持触屏的全屏预览图片的效果

				
			

			

				

					xiongxyt2的专栏
				

				

					10-26
					
					2292
					
				

			

		

		

			
				
JavaScript封装的平滑图片滚动
    
        body
        {
            font-size: 24px;
            margin: 0 0 0 0;
            color: #333;
        }
        #picBox
        {
            height: 400px;

			
		

	





	

		

			

				
					
js 获取屏幕数据

				
			

			

				

					xiongxyt2的专栏
				

				

					10-25
					
					1229
					
				

			

		

		

			
				
function screenInfo() {
            var s = "";
            s += "\r\n网页可见区域宽：" + document.body.clientWidth;
            s += "\r\n网页可见区域高：" + document.body.clientHeight;
            s += "\r\n网页可见区域宽

			
		

	





	

		

			

				
					
JavaScript的document

				
			

			

				

					xiongxyt2的专栏
				

				

					08-09
					
					523
					
				

			

		

		

			
				
JavaScript中Document对象介绍
 
对象属性
document.title              //设置文档标题等价于HTML的标签
document.bgColor            //设置页面背景色
document.fgColor

			
		

	





	

		

			

				
					
更新商品前端接口编写

				
			

			

				

					weixin_55639995的博客
				

				

					07-12
					
					399
					
				

			

		

		

			
				
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。

			
		

	





	

		

			

				
					
Sortable.js板块拖拽示例

					
最新发布

				
			

			

				

					w11111xxxl的博客
				

				

					07-14
					
					751
					
				

			

		

		

			
				
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。

			
		

	





	

		

			

				
					
【JavaScript 报错】未捕获的URI错误：Uncaught URIError

				
			

			

				

					Allen-
				

				

					07-11
					
					679
					
				

			

		

		

			
				
Uncaught URIError 是JavaScript中常见的一种错误，通常发生在全局URI处理函数（如 decodeURIComponent、encodeURIComponent）使用不当时。本文将详细介绍 Uncaught URIError 错误的常见原因及其解决方案。

			
		

	





	

		

			

				
					
jQuery中获取select中option的值.

				
			

			

				

					06-06
				

			

		

		

			
				
你可以使用 jQuery 的 `val()` 方法来获取 select 元素当前选中的 option 的值，示例代码如下：  ```javascript // HTML 代码 <select id="my-select">  <option value="option-1">选项1</option>  <option value=...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值