Question

我发布了html和jquery代码。使用JQuery 1.9.1。

SCRIPT

$(document).ready(function () {
    $('#search').keyup(function () {

        var search = $('#search').val();

        if (search.length > 2) {
            var s = $('<select />');
            $.ajax({
                type: "POST",
                url: "searchuser",
                cache: false,
                data: 'search=' + $("#search").val(),
                success: function (response) {

                    $.each(response, function (index, value) {
                        $('<option />', {
                            value: value,
                            text: value
                        }).appendTo(s);
                    });

                },
                error: function (e) {
                    alert('Error: ' + e);
                }

            });
        }

        s.appendTo('body');
    });
});

HTML

    <form>
      <input id="search" type="text"  name="search" />
    </form>
    <div id="info"></div>

    <div id="other">
      Trigger the handler
    </div>

以上代码正在创建多个选择元素我理解它是由于ajax调用但我怎样才能避免创建额外的选择元素或建议我如何将文本框转换为选择项目

Answer 1

您只需创建一次select元素然后追加所有内容，或者您可以使用.replaceWith。

如果你不是特别需要动态创建select元素，那么最好直接输入html：

<body>

    <form>
      <input id="search" type="text"  name="search" />
    </form>
    <div id="info"></div>

    <div id="other">
      Trigger the handler
    </div>
    <select id="searchSelectTarget">
    </select>

</body>

虽然在你的JS中要小心使用Ajax，但是它是异步的，因此大多数时候在ajax返回之前执行.appendTo：

$('#search').keyup(function () {

    var search = $('#search').val();

    if (search.length > 2) {
        var $select = $('#searchSelectTarget').empty(); //just to reset the content
        $.ajax({
            type: "POST",
            url: "searchuser",
            cache: false,
            data: 'search=' + $("#search").val(),
            success: function (response) {

                $.each(response, function (index, value) {
                    $('<option />', {
                        value: value,
                        text: value
                    }).appendTo($select);
                });
//    s.appendTo('body'); this one would have moved here but you don't need it anymore
            },
            error: function (e) {
                alert('Error: ' + e);
            }

        });
    }


});

使用jquery创建选择框添加多个选择元素

1 个答案: