本文主要介绍了jQuery实现select下拉框获取当前选中文本、值、索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧,希望能帮助到大家。
话不多说,请看代码://直接保存后缀.htnl用谷歌浏览器打开,亲测有效
$(function(){
//为Select添加事件,当选择其中一项时触发
$("select:eq(0)").change(function(){
//code
});
//获取Select选中的Text:结果是由所有匹配元素包含的文本内容组合起来的文本
var checkText = $("select:eq(0) :selected").text();//建议用这个简单
= $("select:eq(0) option:selected").tetx();
= $("#One").find(":selected").text();
= $("#One").find("option:selected").text();
//如果多选,将返回一个数组,其包含所选的值。
var checkValue = $("#select_id").val();
//获取Select选中匹配元素的当前值,即[即使多选也只]取得第一个匹配元素的val内容
var checkValue = $("select:eq(0) :selected").val();//=========强烈建议用这个,以防多选
//获取Select选中的索引值
var checkIndex = $("#select_id ").get(0).selectedIndex;
//获取Select最大的索引值
var maxIndex = $("#select_id :last").prop("index"); //建议用这个
= $("#select_id option:last").prop("index");
= $("select:eq(0)").find(":last").prop("index")
= $("select:eq(0)").find("option:last").prop("index")
//=========================================================================================
//jQuery设置Select选择的 Text和Value:
// 设置Select的Value值为4的项选中
$("#select_id ").val(4); //用这个
$("#select_id [value='4']").prop("selected", true);
$("#select_id option[value='4']").prop("selected", true);
//设置select中的第一个option被选中
$("select :first").prop("selected", true);//这个
$("select :first").prop("selected", 'selected');
$("select option:first").prop("selected", "true");
$("select option:first").prop("selected", "selected");
//============================================================================================
//jQuery添加/删除Select的Option项
$("#select_id").append("Text"); //为Select末尾追加一个Option(下拉项)
$("#select_id").prepend("请选择"); //为Select首部插入一个Option(第一个位置)
$("#select_id :last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id :fist").remove(); //删除Select中索引值最小为0Option(第一个)
$("#select_id [value='3']").remove(); //删除Select中Value='3'的Option
});
相关推荐: