前端开发全面的jQuery获得option的值和对option进行操作

微信前端开发支付入口
微信小程序开发web前端
web前端微信开发教程

jquery获取Select元素,并选择的Text和Value:

html 代码

$(‘#select_id’).change(function() {
    //code…}); //为Select添加事件,当选择其中一项时触发
    var checkText = $(‘#select_id’)
        .find(‘option:selected’)
        .text() //获取Select选择的Text
    var checkValue = $(‘#select_id’).val() //获取Select选择的Value
    var checkIndex = $(‘#select_id ‘).get(0).selectedIndex //获取Select选择的索引值
    var maxIndex = $(‘#select_id option:last’).attr(‘index’) //获取Select最大的索引值
})

jquery获取Select元素,并设置的 Text和Value:
html 代码

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

jQuery添加/删除Select元素的Option项:
html 代码

$(“#select_id”).append(“<option value=’Value’>Text</option>”); //为Select追加一个Option(下拉项)
$(“#select_id”).prepend(“<option value=’0′>请选择</option>”); //为Select插入一个Option(第一个位置)
$(“#select_id option:last”).remove(); //删除Select中索引值最大Option(最后一个)
$(“#select_id option[index=’0′]”).remove(); //删除Select中索引值为0的Option(第一个)
$(“#select_id option[value=’3′]”).remove(); //删除Select中Value=’3’的Option
$(“#select_id option[text=’4′]”).remove(); //删除Select中Text=’4’的Option
三级分类 <select name=”thirdLevel” id=”thirdLevel”
onchange=”getFourthLevel()”>
    <option value=”0″ id=”thirdOption”>
        请选择三级分类
    </option>
</select>
</div > 四级分类:
        <select name=”fourthLevelId” id=”fourthLevelId”>
            <option value=”0″ id=”fourthOption”>
                请选择四级分类
            </option>
        </select>
</div>
if ($(“#thirdLevel”).val() != 0) {
    $(“#thirdLevel option[value!=0]”).remove();
}
if ($(“#fourthLevelId”).val() != 0) {
    $(“#fourthLevelId option[value!=0]”).remove();
}//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到

设置select 选中的value:
html 代码

$(“#ddlRegType “).attr(“value”, “Normal“);
$(“#ddlRegType “).val(“Normal”);
$(“#ddlRegType “).get(0).value = value;

设置select 选中的text:
html 代码

var count = $(‘#ddlRegType option’).length
for (var i = 0; i < count; i++) {
    if ($(‘#ddlRegType ‘).get(0).options[i].text == text) {
        $(‘#ddlRegType ‘).get(0).options[i].selected = true
        break
    }
}
$(“#select_id option[text=’jQuery’]”).attr(‘selected’, true)

设置select option项:
html 代码

$(‘#select_id’).append(“<option value=’Value’>Text</option>”) //添加一项option
$(‘#select_id’).prepend(“<option value=’0′>请选择</option>”) //在前面插入一项option
$(‘#select_id option:last’).remove() //删除索引值最大的Option
$(“#select_id option[index=’0′]”).remove() //删除索引值为0的Option
$(“#select_id option[value=’3′]”).remove() //删除值为3的Option
$(“#select_id option[text=’4′]”).remove() //删除TEXT值为4的Option

设置值 val(‘在这里设置值’)
html 代码

$(‘document’).ready(function() {
    $(‘#btn1’).click(function() {
        $(“[name=’checkbox’]”).attr(‘checked’, ‘true’) //全选
    })
    $(‘#btn2’).click(function() {
        $(“[name=’checkbox’]”).removeAttr(‘checked’) //取消全选
    })
    $(‘#btn3’).click(function() {
        $(“[name=’checkbox’]:even”).attr(‘checked’, ‘true’) //选中所有奇数
    })
    $(‘#btn4’).click(function() {
        $(“[name=’checkbox’]”).each(function() {
            //反选
            if ($(this).attr(‘checked’)) {
                $(this).removeAttr(‘checked’)
            } else {
                $(this).attr(‘checked’, ‘true’)
            }
        })
    })
    $(‘#btn5’).click(function() {
        //输出选中的值
        var str = ”
        $(“[name=’checkbox’][checked]”).each(function() {
            str += $(this).val() + ‘\r\n’
            //alert($(this).val());
        })
        alert(str)
    })
})

获取Select :
获取select 选中的 text :
$(“#ddlRegType”).find(“option:selected”).text();
获取select选中的 value:

$(“#ddlRegType “).val();

获取select选中的索引:
$(“#ddlRegType “).get(0).selectedIndex;
设置select:
设置select 选中的索引:
$(“#ddlRegType “).get(0).selectedIndex=index;//index为索引值

微信端做前端开发
前端 开发微信公众号
前端开发微信公众号
» 本文来自:前端开发者 » 《前端开发全面的jQuery获得option的值和对option进行操作》
» 本文链接地址:https://www.rokub.com/7240.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!