189 8069 5689
jQuery是控制和操作select详解。
创新互联公司是一家专注于成都网站建设、成都网站制作与策划设计,隆德网站建设哪家好?创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:隆德等地区。隆德做网站价格咨询:028-86922220
先看下面的html代码
select id="test"
option value="1"选项一option
option value="2"选项一option
...
option value="n"选项Noption
/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();
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+"。");
});
})
var options=$("#id option:selected");//获取选中的项
alert(options.val()); //拿到选中项的值
alert(options.text()); //拿到选中项的文本
1、首先要保证select中每一个option标签都有value属性；
2、jquery的写法
$('#sele').val()//这里假设select的id是sele，这样可以获取当前选中的option的value
3、刚开始没有选择的时候默认的是第一个option的value值；
4、要测试的话可以写一个change事件，也就是每一次选择都会触发
$('#sele').change(function(){
console.log($('#sele').val())//每次选择都会输出选择的当前option的value
})
5、如果想在js中刚开始就设置选中某一个，可以
$('#sele').val('值')//在括号中写入你想默认选中的某一个option的value值