<option> not append in <select> in jquery

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

The below code worked for me.

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

I noticed that the xml file does not load in chrome when html run from a local folder. But it does work on a server.

Mark as answer if helpful. Cheers

Answer 2

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

Answer 3

It's possible that your title string is malformed and requires escaping.

Concatenating strings isn't a good way to create elements unless you're absolutely sure the values can't contain any special characters. A better approach therefore would be:

$('<option>', { val: title, text: title }).appendTo(select);

I'd note that it's not actually necessary to specify a value in an <option> tag if the desired value is the same as the text contained within the option.

Answer 4

Try this may help you,

   var selectList = "", title = ""; 
   $(xml).find('value').each(function(){ 
    title = $(this).find('name').text(); 
    selectList += "<option value='" + title + "'>" + title + "</option>";
   });
   $('#mySelect').html(selectList);  

this code is work in my case don't know for you....

Answer 5

try

$( select ).append("<option value='"+title+"'>"+title+"</option>");

as you can see, I'm surrounding "select" with $( and )