Question

对于一些人来说这可能听起来很愚蠢，但我想知道如何使用jQuery从多个选择列表中创建html代码。

我尝试使用jQuery网站中的默认代码：

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>selected demo</title>
        <style>
            div {
                color: red;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>

    <body>
        <select name="garden" multiple="multiple">
            <option>Flowers</option>
            <option selected="selected">Shrubs</option>
            <option>Trees</option>
            <option selected="selected">Bushes</option>
            <option>Grass</option>
            <option>Dirt</option>
        </select>
        <div></div>
        <script>
            $("select").change(function() {
                var str = "";
                $("select option:selected").each(function() {
                    str += $(this).text() + " ";
                });
                $("div").text(str);
            }).trigger("change");
        </script>
    </body>

</html>

如何从您的选择中创建<li></li>个对象？对不起，我对jquery代码比较新，但是无法弄明白，我相信这很简单。

Answer 1

只需在您的select标签旁边添加<ul></ul>（删除div标签）并将您的代码更改为此

$("select").change(function() {
                var str = "";
                $("select option:selected").each(function() {
                    str += "<li>" + $(this).text() + "</li>";
                });
                $("ul").html(str);
            }).trigger("change");

jQuery多个选定的选择器创建带有选择的ul列表

1 个答案: