CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Ramprasad
Ramprasad

Reputation: 8071

<option> not append in <select> in jquery

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>.

Upvotes: 4

Views: 3331

Answers (4)

Sunil Raj
Sunil Raj

Reputation: 460

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

Upvotes: 2

Cheery
Cheery

Reputation: 16214

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

Upvotes: 1

Kishor
Kishor

Reputation: 201

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....

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

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.

Upvotes: 0

Related Questions