Jquery insert values of text-field into list-box.?

Question

I want to fetch value from the textfield and add to the listbox. Here is my 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;
 });
});

here is my 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>

question: I cannot add the value of the txt_RegionName to the lst_Region ,where i am going wrong?

Thank you.

Possible duplicate: stackoverflow.com/questions/292101/…

Alec Moore
– Alec Moore

2014-01-27 17:17:23 +00:00
Commented Jan 27, 2014 at 17:17 — Alec Moore
– Alec Moore, Commented Jan 27, 2014 at 17:17

j08691 · Accepted Answer · 2014-01-27 17:18:27Z

2

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

jsFiddle example

answered Jan 27, 2014 at 17:18

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bindi bhatt Over a year ago

Sorry to bother you again , but what if i have more than one text field?? can you please help..

j08691 Over a year ago

So if you had a few text inputs and you want to fold them all into the same select? I'm not sure I follow, can you elaborate?

bindi bhatt Over a year ago

Currently i have 4 text-field.And i want to display it in the list box as sr_no) Asset_name 'Particular' Quantity at price cost.The coatted are the text-field. Can you do the same...

Mehran Hatami · Accepted Answer · 2014-01-27 17:30:31Z

1

you can do this like:

$('#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();
 });

just to let you know, you can prevent it from duplicate values using:

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

which has to be zero, and as you see I have added that to my answer.

edited Jan 27, 2014 at 17:30

answered Jan 27, 2014 at 17:24

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

Comments

konak · Accepted Answer · 2014-01-27 17:40:27Z

1

    {
        $('#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;
        });
    };

answered Jan 27, 2014 at 17:40

konak

1294 bronze badges

Collectives™ on Stack Overflow

Jquery insert values of text-field into list-box.?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related