jquery 控制 Select 标签的问题～～（有图有真相）
需求是这样的：程序会动态读取多个Select，然后可以对其进行编辑，所有select共享一个class，但是现在调试发现问题，发布图片和代码，望各位不吝赐教～！谢谢！
代码：
- HTML code
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style type="text/css">.jTest{ height:150px; width:80px; margin:20px; font-size:16px;}</style><script type="text/javascript" src="jquery-1.7.1.js"></script><script type="text/javascript">$(function() { $('.jTest').change( function() { var checkText = $(".jTest").find("option:selected").text().trim(); var checkValue = $('.jTest').val(); $('#input1').val(checkText); $('#input2').val(checkValue); });});</script><body><select class="jTest" size="5"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option></select><select class="jTest" size="5"> <option value="a2">a2</option> <option value="b2">b2</option> <option value="c2">c2</option> <option value="d2">d2</option></select><br/><form> Text<input type="text" id="input1"/> Value<input type="text" id="input2"/></form></body></html>还有一点，上面的代码在ie8中一点反应也没有，这是为什么？
[解决办法]
还没试你的代码，不过发现一个问题
- JScript code
$(function() { $('.jTest').change( function() { //因为$('.jTest')是一个对象集合，change事件中其实是会去遍历其下每个元素的，因此，你不能在使用$(".jTest")去获取值，应该使用$(this)去获取当前对象，以你这个例子来说。会有两次操作，第1次是得到第1个下拉框，第2次是得到第2个下拉框。循环体中使用$(this)即可获取 var checkText = $(this).find("option:selected").text().trim(); var checkValue = $(this).val(); $('#input1').val(checkText); $('#input2').val(checkValue); });});
[解决办法]
还有一个.trim()方法是已经定义了的么？
[解决办法]
jquery中trim()是trim(" 删除前面的空格")这么使用的
[解决办法]
你的代码思路非常正确，只要改一点点就可以了：- JScript code
<script type="text/javascript">$(function() { $('.jTest').change( function() { var checkText = $(this).find("option:selected").text().trim(); var checkValue = $(this).val(); $('#input1').val(checkText); $('#input2').val(checkValue); });});</script>
[解决办法]
$(function() {
$('.jTest').change(
function() {
var checkText = $(".jTest").find("option:selected").text().trim();
var checkValue = $('.jTest').val();
$('#input1').val(checkText);
$('#input2').val(checkValue);
});
});
$(".jTest")是个集合，，你在点击了第二个select却没点击第一个的时候，$(".jTest").change触发，但是$(".jTest").find("option:selected").text().trim()取到的是所有的select的被选择项的文本内容相加，由于你只点击了第二个，因此你获得到的是""+"b2"，因此text看不出问题，但是$('.jTest').val()取到的是第一个select的选择值，你第一个select没有点击过，因此取到的是null。value显示的是空。第二张图你点击了第一个select，因此$(".jTest").find("option:selected").text().trim()获取到的结果是"a"+"b2"，value的结果是"a"。
把
- JScript code
var checkText = $(".jTest").find("option:selected").text().trim(); var checkValue = $('.jTest').val();