select问题
jquery获取select选择的文本与值:
商品颜色<select id="test"> <option value="A04">漂白 (A04)</option> <option value="B00">黑色 (B00)</option> <option value="C04">中灰色 (C04)</option> <option value="E11">亮黄色 (E11)</option> <option value="F09">翠绿 (F09)</option> <option value="I08">优雅紫 (I08)</option> </select>
获取select的value值value:
var value = $("#test").val();
console.log(value);//A04
获取select当前选中的选项文本值:
jQuery实现:
var text = $("#test").find("option:selected").text();
console.log(test);//漂白 (A04)
var goods_name_t = $("#goods_sn options[checked]").text();//获取选中的options console.log(goods_name_t);//获得选中的text值
上面的方法记得以前写过是可以的,现在不晓得为啥不行,估计我记错了吼吼,没成功,改进:
var goods_name = $("#goods_sn option:selected").text();
JS实现:
var test = document.getElementById("goods_sn").options[window.document.getElementById("goods_sn").selectedIndex].text;
获取select所有选项文本值:
var text= $("#test").text();
console.log(text);//打印出select选项的所有值
获取选中的索引:
var index= $("#test").get(0).selectIndex;
console.log(index);//当前选中的索引 ??
设置:
//get():取得实际的DOM元素而不是jQuery对象,因为jQuery对象只能通过jQuery方法操作。 //原生的js方法 //var selectId=document.getElementById('test'); //jQuery方法 var selectId = $('#test').get(0);//如果不加get(0)获得的是对象,需要调用方法 selectId.options.length = 0;//option设为空了 selectId.options.length = 1;//只留下一个
清空也可以:
$("#test").empty();
设置select 选中的text:选中text值为黑色 (B00)的选项。
方法一:实现text文本值:
var count=$("#test option").length; for(var i=0;i<count;i++){ if($("#test").get(0).options[i].text == "黑色 (B00)"){ $("#test").get(0).options[i].selected = true; break; } }
根据value值选中项:
var count=$("#test option").length; for(var i=0;i<count;i++){ if($("#test").get(0).options[i].value == "I08"){ $("#test").get(0).options[i].selected = true; break; } }
方法二:
$("#test option[value='23']").attr("selected",true);//选中value的值为23的选项,可以选中
$("#test option[text='黑色 (B00)']").attr("selected",true);//做text处理的时候选中不了,不知道为什么?
这里因为option没有text的属性,所以不能实现,可以使用包含选择器,群里问来的吼吼!
$("#test option:contains('黑色 (B00)')").attr("selected",true);//使用包含选择器可以实现
方法三:默认选中value满足下拉框。
$("#goods_sn").val("E00284");//选择单个 $("#goods_sn").val(["E00284","E00283]);//选中多个
设置select option项:
$("#test").append("<option value='value'>text</option>"); //添加一项option $("#test").prepend("<option value='0'>请选择</option>"); //在前面插入一项option $("#test option:last").remove(); //删除索引值最大的option $("#test option[index='0']").remove();//删除索引值为0的option $("#test option[value='3']").remove(); //删除值为3的option $("#test option[text='4']").remove(); //删除text值为4的option
插入一项也可以:
var selectId = $('#test').get(0);//选中DOM元素 var varOption = new Option('free','houhou');//设置值 selectId.options[selectId.options.length] = varOption;
左右选择框互相转换的select实现:
HTML:
<div> 商品颜色<select multiple id="select1" style="width:100px;height:200px"> <option value="A04">漂白 (A04)</option> <option value="B00">黑色 (B00)</option> <option value="C04">中灰色 (C04)</option> <option value="E11">亮黄色 (E11)</option> <option value="F09">翠绿 (F09)</option> <option value="I08">优雅紫 (I08)</option> </select> </div> <div> <button id="add">添加</button> <button id="add_all">添加全部</button> </div> <div> 商品颜色 <select multiple id="select2" style="width:100px;height:200px"> </select> </div> <div> <button id="del">删除</button> <button id="del_all">删除全部</button> </div>
JS:如下实现添加的话,会出现只能删除却加不进去。
$("#add").click(function(){ $("#select1 option:selected").remove();//这是删除掉的 //到这里的时候没有选中的了,选中的都被删除了,所以需要使用remove返回的元素 $("#select1 option:selected").appendTo("#select2"); })
改成下面这样就可以了:
$("#add").click(function(){ var select = $("#select1 option:selected").remove();//remove()返回的是删除的DOM select.appendTo("#select2"); })
当然,appendTo可以实现删除与添加同时实现:
$("#add").click(function(){ $("#select1 option:selected").appendTo("#select2"); })
添加全部就是去掉选中的这个条件而已:
$("#add_all").click(function(){ $("#select1 option").appendTo("#select2"); })
双击实现添加功能:
$("#select1").dblclick(function(){ //这里的两个方法都可以实现 //$("#select1 option:selected").appendTo("#select2"); $("option:selected",this).appendTo("#select2"); })
以上为从左边加到右边,从右边加到左边也和上面的处理方式相同。
posted on 2012-08-21 16:03 color_story 阅读(350) 评论(0) 编辑 收藏 举报