JQuery是控制和操作select详解。
创新互联是一家专业提供宁晋企业网站建设,专注与成都网站设计、成都网站建设、H5开发、小程序制作等业务。10年已为宁晋众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
先看下面的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();
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值
在数据处理的时候，往往会使用select供用户对数据进行选择，我们可以使用change()方法来判断用户是否改变了select的值，change()后，直接弹出select的value就是用户选择的结果，但是怎么获取其选择前的结果呢？
如果使用click()方法貌似可行，点击select框，change()方法还没出发时就弹出select的val()，但是操作后会发现，change()方法触发后，会第二次触发click()方法，也就是click弹出来的结果也会变成change后的值，所以click这么使用行不通，可以用其他变量接收第一次click获取的value，有兴趣的可自己考虑一下。
实际上还有更简单的方法，直接用focus()方法替换click()方法：
$('select').val();这是获得select选中项的值；
如果是要遍历select里面option每一项的值用下面的代码
var select = $('select');
var options = select.find('option');
for(var i = 0; i options.length; i++) {
alert(options[i].value);
}
