Question

我想从文本字段中获取值并添加到列表框中。这是我的jquery code

JS： -

{
$('#btn_AddToList').click(function(
{
    var select = document.getElementById('lst_Regions');
    var region = $('#txt_RegionName').val();

    if('' != region)
    {
        var newOption = document.createElement('option');

        newOption.text = region;
        newOption.value = region;

        if($.browser.msie)
        {
            select.add(newOption);
        }
        else
        {
            select.add(newOption, null);
        }
    }

    return false;
 });
});

这是我的html code

HTML：

<input type="text" name="region" id="txt_RegionName" /><br />
<input type="button" name="add" id="btn_AddToList" value="add" class="btn btn-success" /></br />
<select size="10" id="lst_Regions" style="width: 500px;">
</select>

问题：我无法将txt_RegionName的值添加到lst_Region，我错了？

谢谢。

Answer 1

$('#btn_AddToList').click(function () {
    var val = $('#txt_RegionName').val();
    $('#lst_Regions').append('<option>' + val + '</option>');
    $('#txt_RegionName').val('').focus();
})

<强> jsFiddle example

Answer 2

你可以这样做：

$('#btn_AddToList').click(function(event)
{
    var region = $('#txt_RegionName').val();

    if(region && !$('#lst_Regions>option[value=' + region + ']').length){
        var newOption = $('<option value="' + region + '">' + region + '</option>');

        $('#lst_Regions').append(newOption);
    }

    //return false;
    event.preventDefault();
    event.stopPropagation();
 });

只是为了让您知道，您可以使用以下方法阻止重复值：

$('#lst_Regions>option[value=' + region + ']').length

必须为零，如你所见，我已将其添加到我的答案中。

Answer 3

    {
        $('#btn_AddToList').click(function()
        {
            var select = document.getElementById('lst_Regions');
            var region = $('#txt_RegionName').val();

            if ('' != region) {
                $(document.createElement('option')).text(region).val(region).appendTo(select);
            }
            return false;
        });
    };

Jquery将text-field的值插入到列表框中。？

3 个答案: