问答详情
源自：3-3 jQuery的属性与样式之.val()

这个代码运行后，为什么$("p").text( $("#single").val() )结果没有出来

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    p {
        color: red;
        margin: 4px;
    }
    
    b {
        color: blue;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h3>.val()</h3>
    
    <select id="single">
        <option>慕课网</option>
        <option>博客园</option>
    </select>
    <select id="multiple" multiple="multiple">
        <option selected="selected">imocc</option>
        <option>慕课网</option>
        <option selected="selected">博客园</option>
    </select>
    <input type="text" value="click a button" />
    <p></p>

    <script type="text/javascript">
        //单个select，返回第一个
        $("p").text( $("#single").val() )
    </script>

    <script type="text/javascript">
       
        $("p").text( $("#multiple").val() )
    </script>


    <script type="text/javascript">
     
        $("input[type='text']").val('修改表单的字段')
    </script>


</body>

</html>

提问者：慕粉1007479306 2017-03-24 10:31

个回答

  • 夜莺z
    2017-03-26 14:38:14
    已采纳

    被覆盖了，不信你把下面两个注释掉，看看

    0
  • dickyw
    2017-03-24 12:15:01

     $("p").text( $("#multiple").val() ) 

    执行的值把

     $("p").text( $("#single").val() )

    执行的值给覆盖了，因为text()操作的对象都是JQuery对象$("p")

    0
  • 慕粉3546825
    2017-03-24 11:58:08

    jQuery语法错误了，没有定义jqury，选择元素也没有选择对，下面这段代码改过了，参考下吧，改了一个功能实现，其他的思路都是一样的。

     <!DOCTYPE html>

    <html>

    <head>

        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title></title>

        <style>

        p {

            color: red;

            margin: 4px;

        }

        

        b {

            color: blue;

        }

        </style>

    <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>  

    </head>


    <body>

        <h3>.val()</h3>

        

        <select id="single">

            <option>慕课网</option>

            <option>博客园</option>

        </select>

    <p></p>

    <input type="button" value="点击" />


        <script type="text/javascript">

            //单个select，返回第一个

    $(function(){

    $("input").click(function(){

       $("p").text( $("#single").val() );

    });

    });

        

        </script>


    </body>


    </html>


    0
  • 宝慕林4745799
    2017-03-24 11:57:40

    右边空白的区域点击,就可以显示内容的,这里是用了onclick方法去获取值的.

    0