为什么第一个显示的慕课网消失了？-慕课网

为什么第一个显示的慕课网消失了？

来源：3-3 jQuery的属性与样式之.val()

行走在二进制世界

2016-10-29 15:48

<!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">
        //多个select被选择，返回["imocc", "博客园"]
        $("p").text( $("#multiple").val()) 
    </script>


    <script type="text/javascript">
        //选择一个表单，修改value的值
        $("input[type='text']").val('修改表单的字段') 
    </script>


</body>

</html>

写回答关注

3回答

wingle

2016-11-01 19:21:39

已采纳

因为段落是预先设置好的，第33行只有一个P标签，说明文本只有一段，只能是替换，$("p").text( $("#single").val() )将内容插入到p标签指定的段落中。可以添加段落显示。
<p></p>
<p></p>
    <script type="text/javascript">
        //单个select，返回第一个
        $("p:first").text( $("#single").val())
    </script>
    <script type="text/javascript">
        //多个select被选择，返回["imocc", "博客园"]
        $("p:last").text( $("#multiple").val())
    </script>

0 0
690017359

2017-09-08 16:38:12

p标签如果有两组，后面才会有显示

0 0
有肌肉的coder

2016-10-29 17:46:31

因为$("p").text( $("#multiple").val()) 把第一个内容替换掉了

1 1

行走在二进制...

为什么不是在他后面显示而是替换呢？

2016-10-29 18:49:22

共 1 条回复 >

jQuery基础 (一)—样式篇

jQuery初入开启样式修炼,体验万能的jQuery样式集搭建网站布局

217482 学习 · 1303 问题

相似问题

回答 3

回答 3

回答 5

回答 2

{name: "慕课网"}为什么不直接"慕课网"呢它和"data test"除了形式的区别还有其他不一样啊，我看在取出的时候要这样ele.data("b").name，不麻烦么？

回答 2

打开慕课网App查看更多内容