Как добавить тег <select>в документ HTML, когда пользователь нажимает тег <a href...> с помощью JQuery - PullRequest
0 голосов
/ 31 марта 2011

Я создаю страницу, которая позволяет пользователю выбирать элемент из списка и предоставляет механизм для добавления дополнительных элементов из того же выпадающего меню.

Мой фрагмент кода 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;
    });

Где я ошибаюсь?

Ответы [ 2 ]

0 голосов
/ 31 марта 2011

Эй, вы можете сделать это просто с помощью функции html() в jQuery. Вот как ты это делаешь -

Первый 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 # VmAuC

Этот jSfiddle с эффектом переключения затухания --- http://jsfiddle.net/VmAuC/5/ (Надеюсь, вам понравится этот эффект переключения!)

Скажите, поможет ли это вам или если вы хотите что-то еще, прокомментируйте и спросите меня в любое время.

Надеюсь, это поможет!

0 голосов
/ 31 марта 2011

Для таких задач есть два варианта: один - добавить, второй - показать.Для сложных нединамических вещей я бы предложил использовать второй.

Append (HTML)

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

Append (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>

Unhide (JS)

$('#thisIsAnchor').click(function(){
    $('#here select').show();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...