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");
})

以上为从左边加到右边，从右边加到左边也和上面的处理方式相同。

 

转载于:https://www.cnblogs.com/colorstory/archive/2012/08/21/2645591.html