【问题标题】:how do I get list items and display it in textfield jquery如何获取列表项并将其显示在文本字段 jquery 中
【发布时间】:2012-06-26 16:47:21
【问题描述】:

我正在开发一个 Web 应用程序,但很难解决这个问题。

我有一个如下所示的列表项:

<ul id="list">
    <li>My name is great</li>
    <li>I love Music</li>
    <li>I love EPL</li>
</ul>

我还有一个文本框。

我要做的是克隆或映射(以最佳方法为准)列表项并将其添加到我的文本框值中。

请注意,整个元素 + 文本将被克隆到文本框值。例如:

<li>My name is great</li>

将被克隆到文本框值。

【问题讨论】:

    标签: jquery jquery-selectors


    【解决方案1】:

    假设你给你的文本框一个id,例如:

    <textarea id="contents"></textarea>
    

    然后你可以使用 jQuery 来做到这一点:

    $("#contents").val($("#list").html());
    

    解释:

    • $("#list").html() 获取 ID 为 list 的元素的 HTML 内容
    • $("#contents").val() 设置 id 为 contents 的元素的内容。

    这样做的一个问题是html() 函数可能会保留格式,因此您的列表元素之前可能会在文本区域中出现一堆空白。这可能取决于浏览器。

    将修剪任何前导空白的解决方案:

    $("#contents").val($("#list").html().replace(/^\s+/gm, ""));
    

    这将使用 javascript 正则表达式 /^\s+/gm 从列表 HTML 的所有行的开头修剪空白。

    【讨论】:

    • 谢谢 pb2q。你真的救了我很多。它完美地工作。但我不能将 .text() 用于
    • @sesanOwolabi 我的错误:text() 不应该用于表单中的输入元素。 val() 是正确的。我已经在我的答案中进行了编辑。
    • 谢谢。只是一个小问题,我希望你能帮助我。
    • 谢谢。只是一个小问题,我希望你能帮助我。如果我在第一次单击事件时将 html 内容克隆到列表元素中,现在,我是否在第二次单击时,我如何清理文本框中的第一个值并添加从第二次单击返回的第二个值事件
    • 只使用 val() 应该每次都重置整个 textarea 内容。因此,如果我理解正确,如果在第二次单击时再次调用 val(...contents...),则不需要清理第一个值:只需将其替换使用新值。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-05-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多