CODEWITHSUNDEEP
javascriptjqueryhtml-select
Abdur Rahim
Abdur Rahim

Reputation: 4041

Dynamically add option with jquery and update html source

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?

Upvotes: 1

Views: 618

Answers (4)

Kaptan
Kaptan

Reputation: 336

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

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

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


        });

Upvotes: 0

Suman Banerjee
Suman Banerjee

Reputation: 1961

take out the space between params and :last 

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

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82251

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

Upvotes: 1

James Hibbard
James Hibbard

Reputation: 17795

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.

Upvotes: 0

Related Questions