jquery 怎样获取select多选下拉框所有选项的值

jquery 获取select多选下拉框所有选项的值可以如下实现

var all = "";

$("select option")each(function() {

    all += $(this)attr("value")+" ";

});

而值获取被选中的值可用如下代码实现

$("select")val();

下面给出实例代码：

创建Html元素：一个多选列表和一个按钮

<select id="multi-sel" multiple="multiple">

<option value="1">萝卜，我的value是1</option>

<option value="2">青菜，我的value是2</option>

<option value="3">小葱，我的value是3</option>

<option value="4">豆腐，我的value是4</option>

</select>

<input type="button" value="点击显示选择的项目">

简单设置一下css样式

select{width:200px;height:150px;padding:10px;border:4px dashed #ccc;}

select option{margin:5px;}

input[type='button']{width:200px;height:35px;margin:10px;border:2px dashed #ebbcbe;}

编写jquery代码：实现获取所有值和获取选中值

$(function(){

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

var all = "";

$("select option")each(function() {

all += $(this)attr("value")+" ";

});

var sel = $("select")val();

alert("多选列表所有的value值:"+all+"，其中被选中的是:"+sel+"。");

});

})

观察效果

$("select option:selected")attr("自定义属性名");

//建议自定义属性名称前加data- 这样更符合html5的规范，例如<option data-nema="hi">XXX</option>,这样可以使用另一种方法获取自定义属性的值

$("select option:selected")data("name");//这样可以获取到上面例子中的data-name的值

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，编写问题基础代码，选中选项2。

2、在indexhtml中的<script>标签，输入js代码：

var value = $('#myselect')val();

var text = $('#myselect')find("option:selected")text();

$('body')append('value=' + value + ',text=' + text);

3、浏览器运行indexhtml页面，此时成功获得到选中的选项的值和文本并打印了出来。

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

});

});

单选下拉列表框对象的value属性值就是选中项的value值，因此只需用如下代码即可

1

var selected_val = documentgetElementById(select_id)value;

并且，通过 *** 作select下的option也可以得到被选项的value值，方法为：

var sel = documentgetElementById(select_id);

var selected_val = seloptions[selselectedIndex]value;

实例演示如下:

1、HTML结构及javascript代码

<select id="test" onchange="alert(thisvalue)">

<option value="0">options-0</option>

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

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

</select>

JQuery是控制和 *** 作select详解。

先看下面的html代码

<select id="test">

<option value="1">选项一<option>

<option value="2">选项一<option>

<option value="n">选项N<option>

</select>

所谓jQuery *** 作“select”, 说的更确切一些是应该是jQuery控制 “option”， 看下面的jQuery代码：

//获取第一个option的值

$('#test option:first')val();

//最后一个option的值

$('#test option:last')val();

//获取第二个option的值

$('#test option:eq(1)')val();

//获取选中的值

$('#test')val();

$('#test option:selected')val();

//设置值为2的option为选中状态

$('#test')attr('value','2');

//设置最后一个option为选中

$('#test option:last')attr('selected','selected');

$("#test")attr('value' , $('#test option:last')val());

$("#test")attr('value' , $('#test option')eq($('#test option')length - 1)val());

//获取select的长度

$('#test option')length;

//添加一个option

$("#test")append("<option value='n+1'>第N+1项</option>");

$("<option value='n+1'>第N+1项</option>")appendTo("#test");

//添除选中项

$('#test option:selected')remove();

//删除项选中(这里删除第一项)

$('#test option:first')remove();、

//指定值被删除

$('#test option')each(function(){

if( $(this)val() == '5'){

$(this)remove();

}

});

$('#test option[value=5]')remove();

//获取第一个Group的标签

$('#test optgroup:eq(0)')attr('label');

//获取第二group下面第一个option的值

$('#test optgroup:eq(1) : option:eq(0)')val();

windowonload = function(){

 //首先获得下拉框的节点对象；

 var obj = documentgetElementById("obj");

 //1如何获得当前选中的值？：

 var value = objvalue; 

//2如何获得该下拉框所有的option的节点对象

 var options = objoptions; //注意：得到的options是一个对象数组 

//3如何获得第几个option的value值比如我要获取第一option的value,可以这样： 

var value1 =options[0]value; 

//4如何获得第几个option的文本内容比如我要获取第一option的文本,可以这样：

 var text1 = options[0]text; 

//5如何获得当前选中的option的索引？

 var index = objselectedIndex; 

//6如何获得当前选中的option的文本内容？

//从第2个问题，我们已经获得所有的option的对象数组options了。又从第5个问题，我们获取到了当前选中的option的索引值 //所以我们只要同options[index]下标的方法得到当前选中的option了

var selectedText =options[index]text; 

}

以上就是关于jquery 怎样获取select多选下拉框所有选项的值全部的内容，包括:jquery 怎样获取select多选下拉框所有选项的值、Jquery怎么获取select选中项 自定义属性的值、js 怎么获取select value值 和optione的文字等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！