jq js 操作select和option 功能大全和最全集

4/28/2020

Email Print

jquery操作select(增加，删除，清空)

复制代码

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

2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的

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

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

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

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'的Optiona

5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optiona

内容清空：$("#charCity").empty();

复制代码

jQuery获取Select选择的Text和Value:

复制代码

$("#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最大的索引值

复制代码

比如<select class="selector"></select>

1、设置value为pxx的项选中

$(".selector").val("pxx");

2、设置text为pxx的项选中

$(".selector").find("option[text='pxx']").attr("selected",true);

这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

$(".selector").val();

4、获取当前选中项的text

$(".selector").find("option:selected").text();

这里用到了冒号，掌握它的用法并举一反三也会让代码变得简洁。

很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

如：

复制代码

$(".selector1").change(function(){

// 先清空第二个

$(".selector2").empty();

// 实际的应用中，这里的option一般都是用循环生成多个了

var option = $("<option>").val(1).text("pxx");

$(".selector2").append(option);

});

复制代码

jQuery获取Select选择的Text和Value:

语法解释：

$("#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:

语法解释：

$("#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项：

语法解释：

$("#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

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关

获取一组radio被选中项的值

var item = $('input[name=items][checked]').val();

获取select被选中项的文本

var item = $("select[name=items] option[selected]").text();

select下拉框的第二个元素为当前选中值

$('#select_id')[0].selectedIndex = 1;

radio单选组的第二个元素为当前选中值

$('input[name=items]').get(1).checked = true;

获取值：

文本框，文本区域：$("#txt").attr("value")；

多选框 checkbox：$("#checkbox_id").attr("value")；

单选组radio： $("input[type=radio][checked]").val();

下拉框select： $('#sel').val();

控制表单元素：

文本框，文本区域：$("#txt").attr("value",'');//清空内容

$("#txt").attr("value",'11');//填充内容

多选框checkbox： $("#chk1").attr("checked",'');//不打勾

$("#chk2").attr("checked",true);//打勾

if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组 radio： $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项

下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项

$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option

$("#sel").empty()；//清空下拉框

--------------------

JQuery获取select选中值和清除选中状态（转）

1、获取值

复制代码

var provinceSearch = $("#loc_province_search").find("option:selected").attr("lang");//获取下拉列表选中值

var citySearch = $("#loc_city_search").find("option:selected").attr("lang");//获取下拉列表选中值

var townSearch = $("#loc_town_search").find("option:selected").attr("lang");//获取下拉列表选中值

var linkMan = $('.customer_input_contact').val();//获取输入框内的值

var customerLevel = $(".txt_classification").attr("lang");//获取下拉列表的lang属性值

var customerTrade = $(".txt_industry").attr("lang");//获取下拉列表的lang属性值

var customerClass = $(".txt_segmentation").attr("lang");//获取下拉列表的lang属性值

var busi_statusType = $(".customer_busi_status2").attr("lang");//获取下拉列表的lang属性值

复制代码

2、详解

...

</select>

复制代码

//获取第一个option的值

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

//最后一个option的值

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

//获取第二个option的值

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

//获取选中的值

$('#test').val();

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

//设置值为2的option为选中状态

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

//设置最后一个option为选中

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

$("#test").attr('value' , $('#test option:last').val());

$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());

//获取select的长度

$('#test option').length;

//添加一个option

$("#test").append("<option value='n+1'>第N+1项</option>");

$("<option value='n+1'>第N+1项</option>").appendTo("#test");

//添除选中项

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

//删除项选中(这里删除第一项)

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

//指定值被删除

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

--------------------

多选下拉框的实现

//多选关键字-----------------------------------------------;

function multipleTag(){

//展开多选的框架，这是还没有读取任何数据;

jq(document).on("mousedown","#tag",function(){

if( jq(this)[0].options.length ==0 ){

jq(this).parents("div").attr("z-index","181 !important");

jq(this).attr("height","70px !important");

jq(this).attr("multiple","multiple");

jq(this).attr("size","14");

jq(this).parents("div").attr("position","relative");

jq(this).attr("position","absolute");

jq(this).append("<option value=''>关闭</option>");

colorOptionSelected();

}

})

//有了数据后选择;

jq(document).on("mouseup","#tag",function(){

if( jq(this)[0].options.length >0 ){

var t = jq("#tag").val();

//这个t 是对象，可能是多个内容中间有逗号分隔,option内容不能含有逗号，可改为分号;

if(t!="" && t!=null){

//存在的tag;

var selectedTags = oktag();

//需要转化为字符串才能处理; ;

t = String(t); ;

checkTxt = t.split(","); //字符分割; ;

for (i=0;i<checkTxt.length ;i++ ){

if(checkTxt[i]!="") {

//如果不存在，则添加;

if (selectedTags.indexOf(","+checkTxt[i]+",") == -1){

jq("#selectedtag").before("<span class=\"oktag\">"+checkTxt[i]+"</span>");

}

colorOptionSelected();

}

//如果选择的内容是空值，则表示关闭;

if (t == ""){

jq(this).attr("height","26px !important");

jq(this).removeAttr("multiple");

jq(this).removeAttr("size");

jq(this).empty();

}

})

jq(document).on("click","span.oktag",function(){

jq(this).remove();

a = oktag();

//alert(a);

//对已选择的项目显示不同颜色;

colorOptionSelected();

})

}

function oktag(){

var a = ",";

jq("span.oktag").each(function(){

a = a + jq(this).text() + ","

})

return a

}

function colorOptionSelected(){

jq("#tag option").siblings(".selectedtag").removeClass('selectedtag');

//随便选择一个空白的为选定，也就是取消了当前选定的选中状态;方便显示字体红色避免灰色的底色;

jq('#tag').attr('value','null');

a = oktag();

checkTxt = a.split(","); //字符分割;

for (i=0;i<checkTxt.length ;i++ ){

if(checkTxt[i]!=""){

jq("#tag option[value='"+checkTxt[i]+"']").addClass('selectedtag');

}

//赋值;

jq("#selectedtag").val(a);

}

//end(多选关键字标签)--------------------------------;