功夫码

js循环select里option选项 获取option上的其他属性

晓峰 时间:2019-07-11 00:05:35 阅读:16

js 之jq循环select里option选项

<select id="testId">  
   <option value="" data-name="">--请选择--</option>  
   <option value="1" data-name="pingguo">苹果</option>  
   <option value="2" data-name="xiangjiao">香蕉</option>  
</select>  

// 循环option 然后就可以进行各种操作了

$(function(){
    $("#testId option").each(function() {    
        if($(this).val() == "香蕉") {
            $(this).attr("selected","selected");
        }else {
            $(this).removeAttr("selected")
        }
    })
    
})

获取选中的option上的一些属性值 

 $("#testId").find("option:selected").attr('data-name')


js获取select标签选中的值

var obj = document.getElementByIdx_x(”testSelect”); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值


jQuery中获得选中select值


第一种方式

$('#testSelect option:selected').text();//选中的文本
$('#testSelect option:selected') .val();//选中的值
$("#testSelect ").get(0).selectedIndex;//索引


第二种方式

$("#tesetSelect").find("option:selected").text();//选中的文本
$("#tesetSelect").find("option:selected").val();
$("#tesetSelect").find("option:selected").get(0).selectedIndex;


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

如果select标签是有id属性的,如

<select id=xx>...

则用下述方法获取当前选项的值:

var v = xx.value;

var v = document.getElementById("xx").value;   //此方法兼容性好


如果select标签是有name属性的,如

<form name=form1>

<select name=xx>...

则用下述方法获取当前选项的值:

var v = form1.xx.value;

var v = document.getElementsByName("xx")[0].value;

如果同一页面含有多个name属性相同的标签,则上述[0]中的数字要改为相应的物理顺序号(从0起算)


如果select标签不含有任何可供定位的属性,如

<select>...

则用下述方法获取当前选项的值:

var v = document.getElementsByTagName("select")[0].value;

如果同一页面含有多个select标签,则上述[0]中的数字要改为相应的物理顺序号(从0起算)

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


对于以下select标签,获取当前选择的值得方式如下:

<select id="test" name="">

<option value="1">text1</option>

<option value="2">text2</option>

</select>


一:javascript原生的方法

1:拿到select对象: var myselect=document.getElementById("test");

2:拿到选中项的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value: myselect.options[index].value;

4:拿到选中项options的text: myselect.options[index].text;


二:jquery方法(前提是已经加载了jquery库)

1:var options=$("#test option:selected");  //获取选中的项

2:alert(options.val());   //拿到选中项的值

3:alert(options.text());   //拿到选中项的文本


本文来源:功夫码(gongfuma.com)

声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有,未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

回到顶部