selected下拉列表常用取值、赋值方法总结

本是古典何须时尚 2022-08-13 13:48 349阅读 0赞

今天做了一个关于税率的下拉列表，用到很多selected下拉列表的相关技能，现总结如下：

下拉列表代码如下：

常用取值方法：

var myselect=document.getElementById("tax"+i);       //  获取下拉列表对象  
      var myIndex=myselect.selectedIndex ;                        //  获取下拉列表当前索引         
      var taxId = myselect.options\[myIndex\].value;              //  获取当前索引对应的option选项value值

var taxText = myselect.options\[myIndex\].text;             //   获取当前索引对应的option选项文本框内容值

在JS中更改展示option选项方法：传入你想展示的选项对应的value值即可。

$("\#tax1").val(value);                     // 选中下拉列表，给其传option选项value值，就会展示该value值对应索引的内容值。

增加一个选项的方法：

<span style="font-size:14px;">     var option=document.createElement("option");
         option.text="nami";
         option.value="nami1";
         var x=document.getElementById("mySelect");
         try
         {
              x.add(option,null); // 标准实现
         }
         catch(ex)
         {
              x.add(option); // 仅在IE中实现
         }</span>

**jquery禁用select和取消禁用：**

1.  $("\#channelplatform").removeAttr("disabled");   
    
2.  $("\#channelplatform").attr("disabled","disabled");

添加就是attr

取消则是reomveAttr（注意A大写）

将引入功能（将一张接口表中数据，引入到税率表中）相关JSP代码贴出来，以后可以翻看怎么在JS中取出下拉列表的对象及其属性值。

<span style="font-size:14px;"> function doInto(){  
      	var TP_TAX_RATE = $("#taxAisas1").val();
    	var OP_TAX_RATE = $("#taxAisas2").val();
    	var OS_TAX_RATE = $("#taxAisas3").val();
    	var TR_TAX_RATE = $("#taxAisas4").val(); 
    	var TP_AMOUNT = $("#dealAisasPrice1").val();
    	var OP_AMOUNT = $("#dealAisasPrice2").val();
    	var OS_AMOUNT = $("#dealAisasPrice3").val();
    	var TR_AMOUNT = $("#dealAisasPrice4").val(); 
    		
    	$('#dealPrice1').val(TP_AMOUNT);
    	$('#dealPrice2').val(OP_AMOUNT);
    	$('#dealPrice3').val(OS_AMOUNT);
    	$('#dealPrice4').val(TR_AMOUNT);
    
            var flag_TP = false;
    	var flag_OP = false;
            var flag_OS = false;
    	var flag_TR = false;  
            var id1,id2,id3,id4; 
    
            <s:iterator   value="taxTypeList" >
    	      <s:set name="index" value="#tar_1.getIndex()"/>
    		  <s:set name="id" value="taxTypeList[#index].getId()"/>
    		  <s:set name="taxTypeName" value="taxTypeList[#index].getTaxTypeName()"/>
    
                     ——这里的id1即为option选项对应的value值
                     if(TP_TAX_RATE=='<s:property value="taxTypeName" />'){
    			  id1= '<s:property value="id"  />'
    			  flag_TP = true; 
    		  }
    		  if(OP_TAX_RATE=='<s:property value="taxTypeName" />'){
    			  id2= '<s:property value="id"  />'
    			  flag_OP = true;
    		  }
    		  if(OS_TAX_RATE=='<s:property value="taxTypeName" />'){
    			  id3= '<s:property value="id"  />'
    			  flag_OS = true; 
    		  }
    		  if(TR_TAX_RATE=='<s:property value="taxTypeName" />'){
    			  id4= '<s:property value="id"  />'
    			  flag_TR = true;
    		  }
           </s:iterator>  
    
           ——给selected下拉框设置value值，即可切换为我们希望展示的文本框内容
           $("#tax1").val(id1);
           $("#tax2").val(id2);
           $("#tax3").val(id3);
           $("#tax4").val(id4); 
    
           taxChange(id1,1,"thirdparty_profit");
           taxChange(id2,2,"selfserv_profit");
           taxChange(id3,3,"softwareserv_profit");
           taxChange(id4,4,"train_serv_profit");
    		    
           if(!flag_TP){
    	   alert(TP_TAX_RATE + '税率不存在。');
    	   return false;
           }
           if(!flag_OP){
    	   alert(OP_TAX_RATE + '税率不存在。');
    	   return false;
           } 
           if(!flag_OS){
    	   alert(OS_TAX_RATE + '税率不存在。');
    	   return false;
           } 
           if(!flag_TR){
    	   alert(TR_TAX_RATE + '税率不存在。');
    	   return false;
           }	
       		
     } </span>

用class对多个下拉列表的值进行重复校验:

$('.company').each(function(){
    			var bu = $(this).parent().parent().find('.bu');
    			if($(this).val()!=''&&bu.val()!=''){ 
    				var company = $(this).val();
    				var bu = bu.val();
    				var bcStr = company + bu;   
    				if(bcArray.length > 0)
    				{
    					for(var i=0;i<bcArray.length;i++)
    					{ 
    						if(bcArray[i] == bcStr)
    						{ 
    							var companySelect=$(this); 
    							var companyIndex=companySelect[0].selectedIndex ;  
    							var companyText = companySelect[0].options[companyIndex].text;  
    							var buSelect = $(this).parent().parent().find('.bu')
    							var buIndex=buSelect[0].selectedIndex ;   
    							var buText = buSelect[0].options[buIndex].text; 
    							alert("签约方:"+companyText+"和BU:"+buText+"已经存在，请检查数据。");
    							flag=false;
    							break; 
    						}
    					} 
    					if(flag)
    					{  
    						bcArray.push(bcStr); 
    					}
    					else
    					{ 
    						return false;
    					}
    				}
    				else
    				{
    					bcArray[0] = bcStr;
    				} 
    				
    				
    			}
    		})