How to insert xml text & value in html option text & value

Question

I want to insert a option tag with text and value from reading xml tags.

Here I want to insert <option value> Text</option> like this way below:

<option value[from each xml col1]> Text [from each xml col2] </option>

Here is the code:

var xml = ' <row id="1_2"> <col1>46.0</col1>   <col2>Acting Allowance</col2> </row> <row >            <col1>A1</col1> <col2>Allowance for 65 years plus</col2></row>',
    xmlDoc = $.parseXML(xml),
    $xml = $(xmlDoc);


$xml.find('col2').each(function () {
    var option = $(this).text(), //i want to take text from each col2 as option text  
        value = $(this).attr('value'); //i want to take text from each col1 as option value  
    $("#selectID").append("<option value='" + value + "'>" + option + "</option>");
});

<select id="selectID"></select>

Please let me know for further information. Thanks.

So what exactly isn't working? Note that <col2> doesnt' have a value ? — adeneo
– adeneo, Commented Dec 27, 2015 at 11:26
@adeneo thanks.I saw that col2 doesn't have value.But i just want its the text (not value) of col1 as a Value for <option > tag and text (not value) of col2 as a Text for <option > tag.thanks — user5005768-hd
– user5005768-hd, Commented Dec 27, 2015 at 11:32
might work better if you use <row> in your find action and the grab value/text from either <col1/col2> — RST
– RST, Commented Dec 27, 2015 at 11:35
Thanks @RST .can you please show me this on the given snippet.thanks — user5005768-hd
– user5005768-hd, Commented Dec 27, 2015 at 11:51

Mosh Feu · Accepted Answer · 2015-12-27 12:22:35Z

1

Your XML was invalid. You have to insert any root node (I just was wrapped the xml with <root> node.

var xml = '<root><row id="1_2"><col1>46.0</col1><col2>Acting Allowance</col2></row><row><col1>A1</col1><col2>Allowance for 65 years plus</col2></row></root>',
    xmlDoc = $.parseXML(xml),
    $xml = $(xmlDoc);


$xml.find('row').each(function() {
  var row = $(this),
      option = row.find('col2').text(), //i want to take text from each col2 as option text  
      value = row.find('col1').text(); //i want to take text from each col1 as option value

  $("#selectID").append("<option value='" + value + "'>" + option + "</option>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectID"></select>

edited Dec 27, 2015 at 12:22

answered Dec 27, 2015 at 12:11

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

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

2 Comments

user5005768-hd Over a year ago

Thanks @Mosh Feu the option tag text works. But i want the value from col1 Not from col2 .can you help me on this.thanks

Mosh Feu Over a year ago

I was updated my answer. See if that's what you need.

Collectives™ on Stack Overflow

How to insert xml text & value in html option text & value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related