当前位置: 代码迷 >> JavaScript >> 如何添加 当用户使用JQuery单击标签时,将标签标记为HTML文档
热度:46   发布时间:2023-06-05 16:26:55.0

我正在创建一个页面,该页面允许用户从列表中选择一个项目,并提供一种从同一下拉菜单中添加其他项目的机制。

我的HTML代码段是:

<tr>
    <td class="ventureadd">Size</td>
    <td>
        <input type="text" size="10" name="txtAddress1" />
        <select id="selSize">
            <option value="noselection">Select One</option>
            <option value="feet">Sq. Feet</option>
            <option value="meters">Sq. Meters</option>
            <option value="gunta">Gunta</option>
            <option value="yards">Sq. Yards</option>
            <option value="acre">Acres</option>
        </select>
    </td>
</tr>

JavaScript是:

$(document).ready(function(){
    $(".addhousinglink").click(function(){
        $('#addhousing').append(
            $("<p>Here's a jQuery object</p>")
        );
        return true;
    });

我要去哪里错了?

这些任务有两种选择,一种-追加,第二种-取消隐藏。 对于复杂的非动态内容,我建议使用第二个。

附加(HTML)

<a id="thisIsAnchor" href="#">Add some dropdown box here!</a><div id="here"></div>

附加(JS)

$('#thisIsAnchor').click(function(){
    $('#here').append('<select><option>Here comes and option!</option><option>Then, what am I?</option></select>');
});

取消隐藏(HTML)

<a id="thisIsAnchor" href="#">Add some dropdown box here!</a><div id="here"><select style="display: none"><option>Here comes and option!</option><option>Then, what am I?</option></select></div>

取消隐藏(JS)

$('#thisIsAnchor').click(function(){
    $('#here select').show();
});

嘿,您可以简单地借助jQuery中的html()函数来执行此操作。 这是您可以做到的-

第一个HTML-

<html>
<head>

</head>
<body>
    <a href="#test" id="test" >Click Me!</a>
    <div id="test_handler"></div>
</body>
</html>

而她是jQuery-

$(document).ready(function() {
    $("a#test").click(function() {
        $("div#test_handler").html("<select name=\"test_select\"><option value=\"test\">Test</option></select>");
    });
});

或者,您可以查看此链接

此jSfiddle具有淡入淡出的切换效果--- (希望您喜欢这种切换效果!)

告诉这是否对您有帮助,或者您想进一步发表评论并随时询问我。

希望这可以帮助!

  相关解决方案