XML Attribute to HTML select value using jquery

Question

I am new to jquery.I have an XML file contaning names of countries,states and cities. I want to fill three HTML of country,state and city by using jquery.I have done successfully to transform name of country to a html .But my Problem is i am unable to transform the xml attribute to value.

My Xml file is as follows:

<Locations>
  <Countries>
    <CName index='1'>Afghanistan</CName>
    <CName index='2'>Algeria</CName>
    <CName index='36'>India</CName>
  </Countries>
  <States>
    <SName cindex='36' sindex='1' stype='st'>Andhra Pradesh</SName>
    <SName cindex='36' sindex='2' stype='st'>Arunachal Pradesh</SName>
    <SName cindex='36' sindex='3' stype='st'>Assam</SName>
  </States>
  <Cities>
    <cindex>36</cindex>
    <cityname sindex='1' ctype='ct'>Anantpur</cityname>
    <cityname sindex='1' ctype='ct'>Guntakal</cityname>
    <cityname sindex='1' ctype='ct'>Guntur</cityname>
    <cityname sindex='1' ctype='mct'>Hydrabad/Secundrabad</cityname>
  </Cities>
</Locations>

My HTML is as follows:

<select id="CounList" class="drsel01">// For Country
 </select>

<select id="StateList"></select> //For State

//For City

My JQuery Code is as follows:

<script type="text/javascript">
 $(document).ready(function() {
     var spl_data;      

     // Loading Country
     $.get('Locations.xml', function(data) {
         spl_data = data;
         var that = $('#CounList');
         $('CName', spl_data).each(function() {
             $('<option>').text($(this).text()).appendTo(that); //
             $('<option>').value($(this).attr('index')).appendTo(that);

         });
     }, 'xml');
 });

 I want to country name to be fill in <option> text and value of index attribute to be filled as <option> value.So that when i choose a country then related name of states or cities which belongs to country will be filled.

I have successfully filled text but not value.

Thanks in advance.

ShankarSangoli · Accepted Answer · 2012-03-19 15:16:24Z

1

There is no such method called value(). You should use val() method if you want to set the value of option element. Even after using val() your code will create 2 option elements and append them to CountList.

Try this instead

$('CName', spl_data).each(function() {
   $('<option />', { 
       text: $(this).text(),
       value: $(this).attr('index')
   }).appendTo(that);
});

Working demo - http://jsfiddle.net/qQ2Xw/

edited Mar 19, 2012 at 15:16

answered Mar 19, 2012 at 15:10

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

Comments

Vimalnath · Accepted Answer · 2012-03-19 15:08:50Z

0

Try

$('<option>').val($(this).attr('index')).appendTo(that);

instead of:

$('<option>').value($(this).attr('index')).appendTo(that);

answered Mar 19, 2012 at 15:08

Vimalnath

6,4732 gold badges29 silver badges47 bronze badges

1 Comment

Yogesh kumar Gupta Over a year ago

the above code is appending text and value one after one.Not for one <option>.

Collectives™ on Stack Overflow

XML Attribute to HTML select value using jquery

//For City

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

//For City

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related