jquery 控制 Select 标签的有关问题～（有图有真相）-JavaSript-爱易网页

jquery 控制 Select 标签的有关问题～（有图有真相）

日期：2014-05-16　浏览次数：20388 次

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"，因此te

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jquery 控制 Select 标签的有关问题～（有图有真相）

相关资料更多>

推荐阅读更多>