jquery取的select对象

[zoutuo]

我想取被选中的value和text可以用$("#sel option:selected").val()和$("#sel option:selected").text()，但如果要取为被选中的该怎么做呢？如果我想添加一行、修改一行、删除一行、删除所有option，应该怎么做？
最后：这个ID：sel 后面的option是他的选项的意思吗？还有什么属性？有什么文档是专门介绍jquery的select对象的？请各位支招～多谢

[諾临風]

sel 后面的option是他的选项
取的是集合，怎么删？不就是remove就行了吗？

[myhope88]

网上查找相关文档就行了吧

[stayalive]

问题很多……
1.如果要取为被选中的该怎么做
遍历options没被选中拿好出来
2.如果我想添加一行、修改一行、删除一行、删除所有option
options.add(option)方法向集合里添加一项option对象
options.remove(index)方法移除options集合中的指定项
options.length=0;直接删除所有选项
3.sel 后面的option是他的选项的意思吗？还有什么属性？
虽然不知道你在说什么,不是选项的意思
4.有什么文档是专门介绍jquery的select对象的？
要搞清楚所属关系，select 是属于js 不是属于jquery，jquery只是封装了一些有用的js操作

http://www.w3cschool.cn/dom_obj_select.asp.htm
http://www.w3cschool.cn/coll_select_options.asp.htm

[zoutuo]

[Quote=引用 3 楼 stayalive 的回复:]
问题很多……
1.如果要取为被选中的该怎么做
遍历options没被选中拿好出来
2.如果我想添加一行、修改一行、删除一行、删除所有option
options.add(option)方法向集合里添加一项option对象
options.remove(index)方法移除options集合中的指定项
options.length=0;直接删除所有选项
3.sel 后面的option是……
[/Quote]
首先谢谢你的回答！
不过要指出的一点是：你所说的都是标准的JAVASCRIPT对象，用document.getElementById的方式取到的对像，这些我都会做。现在的问题是，通过用$("#ID")得到的对象是jquery给封装的对象，已经不是标准javascript对象了。文档上说的很少，只有select的赋值、取值，一些高级用法我没有找到。我就是想知道这些属性方法都是什么。
再次感谢！

[路人乙e]

jquery对象转换为dom对象：
$("#id")[0]
dom对象转换为jquery对象：
$(document.getElementById("id"))

添加一个选项：
$("<option value=2>text</option>").appendTo($("#sel"))
删除第一项:
$("#sel options").eq(0).remove();

[hoojo]

$("#sel option:selected").val()
$("#sel option:selected").text()
sel是id
$("#sel option:selected").remove()删除选中的
$("#sel option:selected").val("aaa").text("bbb");修改
$("#sel").append($("<option value='1'>abc</option>"))添加

[stayalive]

$("<option></option>").val('value').text('text').appendTo($(sel));

$(sel)[0].length=0;

[hustcyb]

上面已经解答得差不多了，我再补充一下，选择未被选中的

$('#sel option:not(:selected)')

[list8477]

/*
功能说明：为jquery 类库的一个插件，主要实现对select的操作
*/

(function($){

//得到select项的个数
$.fn.selectSize = function(){
return $(this).get(0).options.length;
}

//获取选中项的索引
$.fn.getSelectedIndex=function(){
return $(this).get(0).selectedIndex;
}

//获取选中项的值
$.fn.getSelectedValue=function(){
if(this.selectSize()==0){
return "下拉框中无选中项";
}else{
return $(this).val();
}
}

//获取当前选项的文本
$.fn.getSelectedText=function(){
if(this.selectSize()==0){
return "下拉框中无选中项";
}else{
var index=this.getselectedIndex();
return $(this).get(0).options[index].text;
}
}

//设置值为value的项为选中
$.fn.setSelectedValue=function(value){
$(this).get(0).value=value;
}

//设置select项为text的项为选中
$.fn.setSelectedText=function(text){
var isExist=false;
var count=this.selectSize();
for(var i=0;i<count;i++){
if($(this).get(0).options[i].text==text){
$(this).get(0).options[i].selected=true;
isExist=true;
break;
}
}
if(!isExist){
alert("下拉框中不存在该项！");
}
}

//设置选中指定索引项
$.fn.setSelectIndex=function(index){
var count=this.selectSize();
if(index>=count||index<0){
alert("索引超出范围！");
}else{
$(this).get(0).selectedIndex=index;
}
}

//判断是否存在值为value的项
$.fn.isExistItem=function(value){
var isExist=false;
var count=this.selectSize();
for(var i=0;i<count;i++){
if($(this).get(0).options[i].value=value){
isExist=true;
break;
}
}
return isExist;
}

//向select添加一项 显示内容为text，值为value 如果该项项值存在，则提示
$.fn.addOption=function(text,value){
if(this.isExistItem(value)){
alert("待添加项已存在！");
}else{
$(this).get(0).options.add(new Option(text,value));
}
}

//删除值为value的项 如果该项不存在则提示
$.fn.removeItem=function(value){
if(this.isExistItem(value)){
var count=this.selectSize();
for(var i=0;i<count;i++){
if($(this).get(0).options[i].value=value){
$(this).get(0).remove(i);
break;
}
}
}else{
alert("待删除的项不存在！");
}
}

//删除指定索引项
$.fn.removeIndex=function(index){
var count=this.selectSize();
if(index>=count||index<0){
alert("索引超出范围！");
}else{
$(this).get(0).remove(index);
}
}

//删除选定项
$.fn.removeSelected=function(){
var index=$(this).get(0).selectedIndex;
this.removeIndex(index);
}

//删除所有项
$.fn.removeAll=function(){
$(this).get(0).options.length=0;
}

//获取slect所有option对象
$.fn.getOptions=function(){
var array=new Array();
var count=this.selectSize();
for(var i=0;i<count;i++){
array[i]=$(this).get(0).options[i];
}
return array;
}

//向selct中添加array或json对象中包含的所有option项
$.fn.addOptionsByArray=function(array){
for(var i=0;i<array.length;i++){
$(this).get(0).options.add(new Option(array[i].text,array[i].value));
}
}

//向select中添加json对象中包含的所有option项
$.fn.addOptionsByJson=function(json){
var jsonObj;
if(typeof json=='string'){
jsonObj=eval(json);
}else if(typeof json=='object'){
jsonObj=json;
}else{
alert('数据格式不正确，无法向select中添加数据！');
}
for(var i=0;i<jsonObj.length;i++){
$(this).get(0).options.add(new Option(jsonObj[i].text,jsonObj[i].value));
}
}

})(jQuery);

不知道对你有没有帮助！

[SK_Aqi]

学习了

[zoutuo]

[Quote=引用 9 楼 list8477 的回复:]
/*
功能说明：为jquery 类库的一个插件，主要实现对select的操作
*/

(function($){

//得到select项的个数
$.fn.selectSize = function(){
return $(this).get(0).options.length;
}

//获取选中项的索引
$.fn.getSelectedIndex=fu……
[/Quote]

十分感谢您提供的JS代码，不过看每一个方法，好像是把所有jQuery对象都转换为普通dom对象了吧？
不过，方法很好，感谢！

[zoutuo]

[Quote=引用 8 楼 hustcyb 的回复:]
上面已经解答得差不多了，我再补充一下，选择未被选中的

JScript code

$('#sel option:not(:selected)')
[/Quote]

请问 然后怎么取值啊，没有val(),text()

[zoutuo]

[Quote=引用 7 楼 stayalive 的回复:]
$("<option></option>").val('value').text('text').appendTo($(sel));

$(sel)[0].length=0;
[/Quote]

谢谢~

[list8477]

$('#sel option:not(:selected)').each(function(){

$(this).val();
$(this).text();

});

[list8477]

var sel=$('#sel option:not(:selected)');

sel_length=sel.length;
for(var i=0;i<sel_length;i++){
sel_value=sel.eq(i).val();
sel_text=sel.eq(i).text();
}
这两种方法差不多的

[zoutuo]

[Quote=引用 15 楼 list8477 的回复:]
var sel=$('#sel option:not(:selected)');

sel_length=sel.length;
for(var i=0;i<sel_length;i++){
sel_value=sel.eq(i).val();
sel_text=sel.eq(i).text();
}
这两种方法差不多的
[/Quote]

你好，这个方式取不到值，请问是为什么？each那个可以。但我不想定义匿名函数～～谢谢！

[list8477]

each()是jquery的一个遍历函数；
他会遍历每一个符合$('#sel option:not(:selected)')条件的对象;

你说
var sel=$('#sel option:not(:selected)');

sel_length=sel.length;
for(var i=0;i<sel_length;i++){
sel_value=sel.eq(i).val();
sel_text=sel.eq(i).text();
}

取不到值？
我这为什么可以？


你把这段代码 拿去试试

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript" src="jquery-select.js"></script>
<script type="text/javascript" src="1.js"></script>
</head>

<body>
<script>
function testSel(){
var sel=$('#sel option:not(:selected)');
sel_length=sel.length;
for(var i=0;i<sel_length;i++){
alert(sel.eq(i).val());
}
}

</script>
<button onclick="testSel()">test</button>

<select id="sel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

</body>
</html>

[亥亥]

顶礼膜拜

[zoutuo]

我找到原因了，是因为我$('#sel option:not(:selected)')的 option 和 :not之间有一个空格,所以得到的length＝＝0。把空格删掉就好了，谢谢。