jQuery怎么获取Select的option个数

基本思路：遍历select下的option，使用val()获取每个option的值，然后加入到一个数组中。根据这个思路，可以使用for循环或者jQuery的each()遍历函数实现。这里提供一个更简洁的代码：

$("option")map(function(){return

$(this)val();})get()join(",

")

代码说明：

使用map()函数把每个option的值传递到当前匹配集合，生成包含返回值的对象；

使用

get()

处理返回的对象以得到基础的数组；

使用join()函数组装字符串。

实例演示如下:

1、HTML结构

<select

id="test">

<option

value="option-1">option-1</option>

<option

value="option-2">option-2</option>

<option

value="option-3">option-3</option>

</select><br>

<input

type="button"

value="获取所有option值">

2、jquery代码

$(function(){

$(":button")click(function()

{

var

str

=

$("#test

option")map(function(){return

$(this)val();})get()join(",

")

alert(str);

});

});

jquery如何获取一个select里面的所有option的值呢？

<select class="form-control" id='mi_name'> <option>全部</option> <option>os2</option> <option>os2-anthonos</option> <option>os2-apps</option> <option>os2-centralpoint</option> <option>kf5-experimental</option> </select> 就这段里面， 展开

m1036779838 | 浏览 36867 次

推荐于2016-02-06 16:37:46 最佳答案

基本思路：遍历select下的option，使用val()获取每个option的值，然后加入到一个数组中。根据这个思路，可以使用for循环或者jQuery的each()遍历函数实现。这里提供一个更简洁的代码：

$("option")map(function(){return $(this)val();})get()join(", ")

代码说明：

使用map()函数把每个option的值传递到当前匹配集合，生成包含返回值的对象；

使用 get() 处理返回的对象以得到基础的数组；

使用join()函数组装字符串。

实例演示如下:

1、HTML结构

<select id="test">

<option value="option-1">option-1</option>

<option value="option-2">option-2</option>

<option value="option-3">option-3</option>

</select><br>

<input type="button" value="获取所有option值">

2、jquery代码

$(function(){

$(":button")click(function() {

var str = $("#test option")map(function(){return $(this)val();})get()join(", ")

alert(str);

});

});

有时候我们需要在一个Select中传递两个有关联但不同的值，比如你的这个情况。这时候要利用到Option的另一个不常用属性Name，用Name来存储第二个值，然后在onchange事件中分别用thisoptions[thisselectedIndex]name来调用这个值。 <select name="opt" onchange="opttvalue=thisoptions[thisselectedIndex]name"> <option name="全12333" value="123323">全12333</option> <option name="全12321" value="121113">全12321</option> <option name="全123123" value="121323">全123123</option> </select> <input name="optt" type="hidden" value=""> 在你的程序里，把<option></option>之间的内容作为name属性写出来，然后定义一个隐藏的input——optt，再定义好onchange事件，就可以同时获取到value和name两个值了。

1、获取选中select的value和text,html代码如下：

<select id="mySelect">

<option value="1">one</option>

<option value="2">two</option>

<option value="3">three</option>

</select>

则可通过以下script代码s来获取选中的value和text

$("#mySelect")val(); //获取选中记录的value值

$("#mySelect option:selected")text(); //获取选中记录的text值

2、运用new Option("文本","值")方法添加选项option

var obj = documentgetElementById("mySelect");

objadd(new Option("4","4"));

3、删除所有选项option

var obj = documentgetElementById("mySelect");

objoptionslength = 0;

4、删除选中选项option

var obj = documentgetElementById("mySelect");

var index = objselectedIndex;

objoptionsremove(index);

5、修改选中选项option

var obj = documentgetElementById("mySelect");

var index = objselectedIndex;

objoptions[index] = new Option("three",3); //更改对应的值

objoptions[index]selected = true; //保持选中状态

6、删除select

var obj = documentgetElementById("mySelect");

objparentNoderemoveChild(obj); //移除当前对象

7、select选择的响应事件

$("#mySelect")change(function(){

//添加所需要执行的 *** 作代码

})

1如果 select 元素下的所有 option 元素均没有指定 selected 属性，会默认选中第一个。

2可以通过 selectselectedIndex 获取到选中的 option 元素的索引。

3可以通过 selectoptions[selectselectedIndex] 获取到选中的 option 元素。

option 元素 <option selected="selected" value="value3">text3</option>，可以通过 optionvalue 获得 option 元素的 value 属性值，即 value3；可以通过 optiontext 获得 option 元素内的文本，即 text3。

4如果 option 元素没有定义 value 属性，则 IE 中 optionvalue 无法获得，但 Safari、Opera、FireFox 依旧可以通过 optionvalue 获得，值同于 optiontext 。

5可以通过 optionattributesvalue && optionattributesvaluespecified 来判断 option 元素是否定义了 value 属性。

6故，获得当前 select 元素值的脚本如下：

var getSelectValue = funtion(select) {

var idx = selectselectedIndex,

option,

value;

if (idx > -1) {

option = selectoptions[idx];

value = optionattributesvalue;

return (value && valuespecified) optionvalue : optiontext);

}

return null;

}

以上就是关于jQuery怎么获取Select的option个数全部的内容，包括:jQuery怎么获取Select的option个数、怎么获取select标签里所有option的内容、如何获取<select>lt;/select>中所有的<option>内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！