有如下测试内容:
<body>
x1:<select id="x">
<option value="1">上海</option>
<option value="2">北京</option>
<option value="3">武汉</option>
<option value="4">深圳</option>
</select>
x2:<select id="x2">
<option>上海</option>
<option>北京</option>
<option>武汉</option>
<option>深圳</option>
</select>
<button id="ok">提交</button>
<br/>
x1-values:<span></span><br/>
x1-text:<span></span><br/>
x2-values:<span></span><br/>
x2-text:<span></span>
</body>
现在要取得想x1和x2的value值和text值。
界面效果如下:
x1: 上海 北京 武汉 深圳 x2: 上海 北京 武汉 深圳 提交
x1-values:
x1-text:
x2-values:
x2-text:
加入js代码如下;
<script type="text/javascript">
$(function(){
getSelectVal();
});
function getSelectVal(){
var x1=$("#x");
var x2=$("#x2");
var xv1=$("span:eq(0)");
var xt1=$("span:eq(1)");
var xv2=$("span:eq(2)");
var xt2=$("span:eq(3)");
$("#ok").click(function(){
xv1.text(x1.val());
xt1.text(x1.text());
xv2.text(x2.val());
xt2.text(x2.text());
});
}
</script>
运行之后
效果:
x1: 上海 北京 武汉 深圳 x2: 上海 北京 武汉 深圳 提交
x1-values:4
x1-text: 上海 北京 武汉 深圳
x2-values:深圳
x2-text: 上海 北京 武汉 深圳
可以看到当option中有value属性和没有时,取得的value值是不同的。
text值则是它全部文本值
有些时候我们往数据库存的是数字标识,就要给option的value属性。但同时要取得text的值怎么办呢?
我们将js中x1和x2的代码改成如下:
var x1=$("#x option:selected");
var x2=$("#x2 option:selected");
效果:
x1: 上海 北京 武汉 深圳 x2: 上海 北京 武汉 深圳 提交
x1-values:1
x1-text:上海
x2-values:上海
x2-text:上海
取到了需要的值。
$("#x option:selected");取得是选中行。选中行中的数据就可以轻易拿到了。