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的文字等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)