jQuery对select操作

sty2008boy

//遍历option和添加、移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each(function(){   if($(this).val() == 111){    $(this).remove();   }  }); }else{  $("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]")); }}//取得下拉选单的选取值$(#testSelect option:selected').text();或$("#testSelect").find('option:selected').text();或$("#testSelect").val();//////////////////////////////////////////////////////////////////记性不好的可以收藏下：1,下拉框:var cc1   = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值$("#select").empty();//清空下拉框//$("#select").html('');$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option稍微解释一下:1.select[@name='country'] option[@selected] 表示具有name 属性，并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素；可以看出有@开头的就表示后面跟的是属性。2,单选框:$("input[@type=radio][@checked]").val();   //得到单选框的选中项的值(注意中间没有空格)$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)3,复选框:$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出   alert($(this).val());   });$("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);//打勾if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾当然jquery的选择器是强大的. 还有很多方法.<script src="jquery-1.2.1.js" type="text/javascript"></script><script language="javascript" type="text/javascript">$(document).ready(function(){$("#selectTest").change(function(){       //alert("Hello");       //alert($("#selectTest").attr("name"));       //$("a").attr("href","xx.html");       //window.location.href="xx.html";       //alert($("#selectTest").val());       alert($("#selectTest option[@selected]").text());       $("#selectTest").attr("value", "2");});});</script><a href="#">aaass</a><!--下拉框--><select id="selectTest" name="selectTest"><option value="1">11</option><option value="2">22</option><option value="3">33</option><option value="4">44</option><option value="5">55</option><option value="6">66</option></select>jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;获取值：文本框，文本区域：$("#txt").attr("value")；多选框checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[@type=radio][@checked]").val();下拉框select： $('#sel').val();控制表单元素：文本框，文本区域：$("#txt").attr("value",'');//清空内容                $("#txt").attr("value",'11');//填充内容多选框checkbox： $("#chk1").attr("checked",'');//不打勾                $("#chk2").attr("checked",true);//打勾                if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项            $("<optionvalue='1'>1111</option><optionvalue='2'> 2222</option>").appendTo("#sel")//添加下拉框的option            $("#sel").empty()；//清空下拉框获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked = true;获取值：文本框，文本区域：$("#txt").attr("value")；多选框checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[@type=radio][@checked]").val();下拉框select： $('#sel').val();控制表单元素：文本框，文本区域：$("#txt").attr("value",'');//清空内容$("#txt").attr("value",'11');//填充内容多选框checkbox： $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);//打勾if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option$("#sel").empty()；//清空下拉框 
ps:new
js操作select相关方法1.判断select选项中 是否存在Value="paraValue"的Item2.向select选项中 加入一个Item3.从select选项中 删除一个Item4.修改select选项中 value="paraValue"的text为"paraText"5.设置select中text="paraText"的第一个Item为选中6.设置select中value="paraValue"的Item为选中7.得到select的当前选中项的value8.得到select的当前选中项的text9.得到select的当前选中项的Index10.清空select的项JavaScript代码//1.判断select选项中 是否存在Value="paraValue"的Item  function jsSelectIsExitItem(objSelect,objItemValue)  {      var isExit = false;      for(var i=0;i<objSelect.options.length;i++)      {          if(objSelect.options[i].value == objItemValue)          {              isExit = true;              break;          }      }           return isExit;  }    //2.向select选项中 加入一个Item  function jsAddItemToSelect(objSelect,objItemText,objItemValue)  {      //判断是否存在      if(jsSelectIsExitItem(objSelect,objItemValue))      {          alert("该Item的Value值已经存在");      }      else      {          var varItem = new Option(objItemText,objItemValue);  //      objSelect.options[objSelect.options.length] = varItem;          objSelect.options.add(varItem);          alert("成功加入");      }     }    //3.从select选项中 删除一个Item  function jsRemoveItemFromSelect(objSelect,objItemValue)  {      //判断是否存在      if(jsSelectIsExitItem(objSelect,objItemValue))      {          for(var i=0;i<objSelect.options.length;i++)          {              if(objSelect.options[i].value == objItemValue)              {                  objSelect.options.remove(i);                  break;              }          }                 alert("成功删除");                 }      else      {          alert("该select中 不存在该项");      }     }    //4.修改select选项中 value="paraValue"的text为"paraText"  function jsUpdateItemToSelect(objSelect,objItemText,objItemValue)  {      //判断是否存在      if(jsSelectIsExitItem(objSelect,objItemValue))      {          for(var i=0;i<objSelect.options.length;i++)          {              if(objSelect.options[i].value == objItemValue)              {                  objSelect.options[i].text = objItemText;                  break;              }          }                 alert("成功修改");                 }      else      {          alert("该select中 不存在该项");      }     }           //5.设置select中text="paraText"的第一个Item为选中  function jsSelectItemByValue(objSelect,objItemText)  {         //判断是否存在      var isExit = false;      for(var i=0;i<objSelect.options.length;i++)      {          if(objSelect.options[i].text == objItemText)          {              objSelect.options[i].selected = true;              isExit = true;              break;          }      }           //Show出结果      if(isExit)      {          alert("成功选中");                 }      else      {          alert("该select中 不存在该项");      }     }    //6.设置select中value="paraValue"的Item为选中  //document.all.objSelect.value = objItemValue;    //7.得到select的当前选中项的value  //var currSelectValue = document.all.objSelect.value;    //8.得到select的当前选中项的text  //var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;    //9.得到select的当前选中项的Index  //var currSelectIndex = document.all.objSelect.selectedIndex;    //10.清空select的项  // document.all.objSelect.options.length = 0;   ///////////////////////////// 向Select里添加Option function fnAddItem(text,value)           {             var selTarget = document.getElementById("selID");              selTarget.Add(new Option("text","value"));         } 2、删除Select里的Option function fnRemoveItem()           {             var selTarget = document.getElementById("selID");              if(selTarget.selectedIndex > -1)                {//说明选中                 for(var i=0;i<selTarget.options.length;i++)                   {                     if(selTarget.options[i].selected)                       {                         selTarget.remove(i);                                                  i = i - 1;//注意这一行                     }                 }             }         } 3、移动Select里的Option到另一个Select中         function fnMove(fromSelectID,toSelectID)           {             var from = document.getElementById(fromSelectID);             var to = document.getElementById(toSelectID);                          for(var i=0;i<from.options.length;i++)               {                 if(from.options[i].selected)                   {                     to.appendChild(from.options[i]);                     i = i - 1;                 }             }         }    if 里的代码也可用下面几句代码代替   var op = from.options[i];   to.options.add(new Option(op.text, op.value));   from.remove(i);4、Select里Option的上下移动         function fnUp()           {                var sel = document.getElementById("selID");             for(var i=1; i < sel.length; i++)               {//最上面的一个不需要移动，所以直接从i=1开始                 if(sel.options[i].selected)                   {                     if(!sel.options.item(i-1).selected)                       {//上面的一项没选中，上下交换                           var selText = sel.options[i].text;                           var selValue = sel.options[i].value;                                                      sel.options[i].text = sel.options[i-1].text;                           sel.options[i].value = sel.options[i-1].value;                           sel.options[i].selected = false;                                                      sel.options[i-1].text = selText;                           sel.options[i-1].value = selValue;                           sel.options[i-1].selected=true;                     }                 }             }         }在进行上下两项互换时，也可以使用以下代码，但是效率很低，因为每一次的Dom操作都将导致整个页面的重新布局，所以不如直接修改元素的属性值。                         var oOption = sel.options[i]                         var oPrevOption = sel.options[i-1]                         sel.insertBefore(oOption,oPrevOption);向下移动同理 function fnDown()           {             var sel = fnGetTarget("selLeftOrRight");             for(var i=sel.length -2; i >= 0; i--)               {//向下移动，最后一个不需要处理，所以直接从倒数第二个开始                 if(sel.options.item(i).selected)                   {                     if(!sel.options.item(i+1).selected)                       {//下面的Option没选中，上下互换                           var selText = sel.options.item(i).text;                           var selValue = sel.options.item(i).value;                                                      sel.options.item(i).text = sel.options.item(i+1).text;                           sel.options.item(i).value = sel.options.item(i+1).value;                           sel.options.item(i).selected = false;                                                      sel.options.item(i+1).text = selText;                           sel.options.item(i+1).value = selValue;                           sel.options.item(i+1).selected=true;                     }                 }             }         }5、Select里Option的排序这里借助Array对象的sort方法进行操作，sort方法接受一个function参数，可以在这个function里定义排序时使用的算法逻辑。array.sort([compareFunction]) 里compareFunction接受两个参数(p1,p2)，sort操作进行时，array对象会每次传两个值进去，进行比较； compareFunciton必须返回一个整数值：当返回值>0时，p1会排在p2后面；返回值<0时，p1会排在p2前面；返回值=0 时，不进行操作。例如：  function fnCompare(a,b)           {             if (a < b)                 return -1;             if (a > b)                 return 1;             return 0;         } var arr = new Array(); //add some value into arr arr.sort(fnCompare); //这里sort的操作结果就是arr里的项按由小到大的升序排序 //如果把fnCompare里改为 //if (a < b) //  return 1; //if (a > b) //  return -1; //return 0; //则sort的结果是降序排列 好，下面就是对Select里Option的排序 //因为排序可以按Option的Value排序，也可以按Text排序，这里只演示按Value排序 function sortItem()   {     var sel = document.getElementById("selID");     var selLength = sel.options.length;     var arr = new Array();     var arrLength;      //将所有Option放入array     for(var i=0;i<selLength;i++)       {         arr[i] = sel.options[i];     }     arrLength = arr.length;      arr.sort(fnSortByValue);//排序     //先将原先的Option删除     while(selLength--)       {         sel.options[selLength] = null;     }     //将经过排序的Option放回Select中     for(i=0;i<arrLength;i++)       {         sel.add(new Option(arr[i].text,arr[i].value));     } } function fnSortByValue(a,b)   {     var aComp = a.value.toString();     var bComp = b.value.toString();      if (aComp < bComp)         return -1;     if (aComp > bComp)         return 1;     return 0; }