jquery 操作select下拉列表的一些实例

时间:2015-12-26
本文章向大家介绍jquery 操作select的一些实例,包括jquery获取select的第一个option的值、jquery获取select最后一个option的值、jquery根据索引获取select option的值、jquery获取select选中的值、jquery设置某个option为选中状态、jquery获取select的长度等等。需要的码农可以参考一下。

本文章需要使用到的html: 

<select id="test">
    <option value="1">php<option>
    <option value="2">mysql<option>
    <option value="n">java<option>
</select>

jquery获取select第一个option的值

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

jquery获取select最后一个option的值

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

jquery获取select第二个option的值

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

jquery获取select选中的值

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

jquery设置select值为"php"的option为选中状态

$('#test').attr('value','php');

jquery设置select最后一个option为选中

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

jquery获取select的长度

$('#test option').length;

jquery为select添加一个option

$("#test").append("<option value='javascript'>javascript</option>");
或
$("<option value='javascript'>javascript</option>").appendTo("#test");

jquery移除select选中项

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

jquery删除select某一项(这里删除第一项)

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

jquery指定值删除select中的option项

$('#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();