Dynamically add option with jquery and update html source

Question

I have two listbox, A & B:

enter image description here

when I double click on an item of A , the item will be added in List B. And i have done this. List B visually show the value, but when I go to the view source of the page, I dont see new <option>.

This is my List A options.

enter image description here

This is my List B options (before and after addition and it remains same whatever items added. this is my problem.):

enter image description here

It should have one <option>. like

<option value="VSNR">VSNR</option>

what is my code is :

   $('#lstXLSCol').on('dblclick', function () {
        var item = $('#lstXLSCol').find(":selected").text();

        var newOption = { item: item };
        $('option:selected', this).remove();
        $.each(newOption, function (val, text) {
            if (text != "")
                $('#lstXLSSelectedCol').append(new Option(text, val));
        });
    });

EDIT 1 :

I have found it pressing F12 in IE. but the values are like below:

enter image description here

but, i wanted to insert the value same as text. What should be changed in my jquery code?

Its will not reflect in source page..... press F12 and inspect your dropdown...you can see the updated options — rynhe
– rynhe, Commented Jan 17, 2014 at 9:04
possible duplicate of Is it correct that page elements created by jQuery do not show up in the source code — Satpal
– Satpal, Commented Jan 17, 2014 at 9:08

Community · Accepted Answer · 2017-05-23 11:54:15Z

1

you can not see them. The source is just used to build the initial DOM that represents the document. Dynamically created elements are only inserted in the DOM.

But you can analyse such elements with a DOM viewer like Safari’s WebInspector or the Firefox extionsion Firebug. Firefox can also show source code that represents such dynamically created elements by selecting that element an choosing View Selection Source in the context menu.

See this

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jan 17, 2014 at 9:06

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

Comments

Suman Banerjee · Accepted Answer · 2014-01-17 09:19:00Z

1

take out the space between params and :last

$('#lstXLSSelectedCol:last').html('<option value=\''+item+'\'>'+item+'</option><option>');

edited Jan 17, 2014 at 9:19

answered Jan 17, 2014 at 9:11

Suman Banerjee

1,9614 gold badges24 silver badges40 bronze badges

Comments

Kaptan · Accepted Answer · 2014-01-17 11:27:12Z

0

$('#lstXLSSelectedCol:last').live('change', function () {

            var option_selected = $('option:selected', this).val();

                $('#lstXLSSelectedCol:last').append($('<option>', {
                    value: option_selected
                }).text(option_selected));        


        });

answered Jan 17, 2014 at 11:27

Kaptan

3362 silver badges11 bronze badges

Comments

Community · Accepted Answer · 2017-04-13 12:33:14Z

0

You won't see dynamically added elements in the source of your page.

Use your browser's console to inspect the DOM.

Normally it's enough to right click on the element and select "inspect" from the context menu, otherwise see this link for how to access your browser's console.

edited Apr 13, 2017 at 12:33

CommunityBot

11 silver badge

answered Jan 17, 2014 at 9:04

James Hibbard

17.8k14 gold badges69 silver badges76 bronze badges

1 Comment

James Hibbard Over a year ago

Your entire code looks a bit weird to me. If you make a fiddle, that'll make life much easier.

Collectives™ on Stack Overflow

Dynamically add option with jquery and update html source

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related