JQuery 常用积累(三)Select 下拉框

<select id="hello"></select>

1.jQuery获取Select选择的Text和Value:
语法解释:

 $("#select_id").change(function(){//code...});             //为Select添加事件,当选择其中一项时触发 

var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值

var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

var checkValue=$("#select_id").val();                          //获取Select选择的Value 

var firstText = $(‘#select_id option:first‘).val();            //获取第一个 select 的value值

var lastText = $(‘#select_id option:last‘).val();            //获取最后一个 select 的value值

var secondText = $(‘#select_id option:eq(1)‘).val();      //获取第二个 select 的value值

var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text ,同理,里面的option:selected 可以换做first,last,eq(0),看具体需求了

var length = $(‘#select_idoption‘).length;                  //获取select 长度

2.jQuery设置Select选择的Text和Value:
语法解释:

1. $("#select_id ").get(0).selectedIndex=1;                         //设置Select索引值为1的项选中
2. $("#select_id ").val(4);                                                  //设置Select的Value值为4的项选中
3. $("#select_id option[text=‘jQuery‘]").attr("selected", true); //设置Select的Text值为jQuery的项选中 

3.jQuery添加/删除Select的Option项:
语法解释:

1. $("#select_id").append("<option value=‘Value‘>Text</option>");    //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value=‘0‘>请选择</option>");     //为Select最前插入一个Option(第一个位置)
3. $("#select_id option:last").remove();                                        //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index=‘0‘]").remove();                            //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value=‘3‘]").remove();                          //删除Select中Value=‘3‘的Option
5. $("#select_id option[text=‘4‘]").remove();                         //删除Select中Text=‘4‘的Option 

4.遍历option和添加、移除option

function changeShipMethod(shipping) {
    var len = $("select[@name=ISHIPTYPE] option").length
    if (shipping.value != "CA") {
        $("select[@name=ISHIPTYPE] option").each(function() {
            if ($(this).val() == 111) {
                $(this).remove();
            }
        });
    } else {
        $("<option value=‘111‘>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));
    }
}
时间: 2024-08-05 08:27:57

JQuery 常用积累(三)Select 下拉框的相关文章

jquery 获取和设置 select下拉框的值

<div style="display:block;text-align:left;margin-left:1em;"> <select id="uploadFrequency" style="width:50%;font-size:1em;" onchange="changeFunction()"> <option value="-1" selected="sele

jQuery制作简洁的多级联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: <div class="wrap">        <div class="nice-select" name="nice-select">   

基于jQuery select下拉框美化插件

今天给大家分享一款基于jQuery select下拉框美化插件,这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.  <table>         <tr>             <td>                 <h2>                     演示1</h2>                 <select name="drop1&qu

jquery操作select下拉框的多种方法(选中,取值,赋值等)

jQuery获取Select选择的Text和Value:语法解释:1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text3. var checkValue=$("#select

jQuery操作select下拉框的text值和value值的方法

1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

Jquery+json绑定带层次下拉框(select控件)

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];

jquery操作select下拉框的多种方法(选中,取值,赋值等) 转载

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text 3. var checkValue=$("#se

jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

jquery选中将select下拉框中一项后赋值给text文本框

jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件.所以无法进行赋值给文本框 解决方法. select下拉框设置第一项做一个无用的占位option <script type="text/javascript">     function changeSelect(obj) {         var _this = obj;  

一款基于jQuery的联动Select下拉框

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="nice-select" name="nice-select&