Home > Web Front-end > JS Tutorial > jquery 操作select下拉列表的一些实例

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

WBOY
Release: 2016-06-01 09:54:47
Original
1099 people have browsed it

本文章需要使用到的html: 

<code class="language-html"><select id="test">
    <option value="1">php</option>
<option>
    </option>
<option value="2">mysql</option>
<option>
    </option>
<option value="n">java</option>
<option>
</option></select></code>
Copy after login

jquery获取select第一个option的值

<code class="language-javascript">$('#test option:first').val();</code>
Copy after login

 

jquery获取select最后一个option的值

<code class="language-javascript">$('#test option:last').val();</code>
Copy after login

 

jquery获取select第二个option的值

<code class="language-javascript">$('#test option:eq(1)').val();</code>
Copy after login

 

jquery获取select选中的值

<code class="language-javascript">$('#test').val();
或
$('#test option:selected').val();</code>
Copy after login

 

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

<code class="language-javascript">$('#test').attr('value','php');</code>
Copy after login

 

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

<code class="language-javascript">$('#test option:last').attr('selected','selected');</code>
Copy after login

 

jquery获取select的长度

<code class="language-javascript">$('#test option').length;</code>
Copy after login

 

jquery为select添加一个option

<code class="language-javascript">$("#test").append("<option value="javascript">javascript</option>");
或
$("<option value="javascript">javascript</option>").appendTo("#test");</code>
Copy after login

 

jquery移除select选中项

<code class="language-javascript">$('#test option:selected').remove();</code>
Copy after login

 

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

<code class="language-javascript">$('#test option:first').remove();</code>
Copy after login

 

jquery指定值删除select中的option项

<code class="language-javascript">$('#test option').each(function(){
    if( $(this).val() == '5'){
         $(this).remove();
     }
});
$('#test option[value=5]').remove();</code>
Copy after login

 

获取第一个Group的标签

<code class="language-javascript">$('#test optgroup:eq(0)').attr('label');</code>
Copy after login

 

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

<code class="language-javascript">$('#test optgroup:eq(1) : option:eq(0)').val();</code>
Copy after login

 

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template