Question

I have tried to append <option> inside <select> using javascript by parsing data from XMl. Data parsed from xml properly,but it is not appending in <select>.

Also I want to show option as (image+text) format. How to do this….

My HTML code:

<form style="margin:20px 0">
    <p>
        <select id='mySelect' multiple="multiple" style="width:370px">
        </select>
    </p>

</form>

Javascript code:

$(document).ready(function(){

    $.ajax({
        type: "GET",
        url: "newpersonal1.xml",
        dataType: "xml",
        success: function(xml) {
            var select = $('#mySelect');
            $(xml).find('value').each(function(){
                 var title = $(this).find('name').text();
                 alert(title);
                 select.append("<option value='"+title+"'>"+title+"</option>");         
            });                 
        }
    });
});

How to fix this issue and add image in select <option>.

Answer 1

You have to make additional steps when you deal with “filter and multiselect plugin” in your way.

It mimics the select object, hiding the original one and creating the set of button and span elements. It uses the original one only at the moment of initialization.

So, you have to call function refresh() as soon as you update the original select tag with additional options.

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#refresh