<!DOCTYPE html>
<html>
<head>
<style type="text/CSS">
</style>
</head>
<body>
<select id="publish">
<option value="1">what is this</option>
<option value="2">this is select</option>
<option value="3">oh,thanks</option>
<option value="4">you are welcome</option>
</select>
<div id="testDiv"></div>
<script type="text/JavaScript" src="publicJQuery/jquery-2.1.4.js"></script>
<script type="text/JavaScript">
function getSelected(){
var option=document.getElementById('publish').value;//有value就得到value(1,2,3,4),没有就得到选项值(what is this ...)
var obj=document.getElementById('testDiv');
obj.innerText=option;
}
/* 通过option直接取得值*/
function getSelectedTwo(){
var options=document.getElementsByTagName('option');
var obj=document.getElementById('testDiv');
for(var i=0; i<options.length; i++){
if(options[i].selected==true){
obj.innerText="value值为:"+options[i].value+"。text值为:"+options[i].text;//options[i].innerText也可以
}
}
}
/* 通过索引值selectedIndex来取得值*/
function getSelectedThree(){
var select=document.getElementById('publish');
var selectedIndex=select.selectedIndex;
//alert(selectedIndex);//索引为0123
var obj=document.getElementById('testDiv');
obj.innerText="value值为:"+select.options[selectedIndex].value+"。text值为:"+select.options[selectedIndex].text;
}
/*
jQuery用法,为什么用的是val()跟text(),因为jQuery是js库,所以这里的val()跟text()是调用的方法,
上面的原生的js的value跟text是原生js的属性。
*/
function getSelectedFour(){
var selected=$("#publish option:selected");
var value=selected.val();
var text=selected.text();
var obj=document.getElementById('testDiv');
obj.innerText="value值为:"+value+"。text值为:"+text;
}
document.getElementById('publish').οnclick=getSelectedFour;
</script>
</body>
</html>
select的option属性value以及text值的获取操作
最新推荐文章于 2023-11-21 15:07:02 发布