Wednesday, 1 May 2013

Auto Populate Dropdown using Jquery ,Ajax and XML

Auto Populate Dropdown using Jquery ,Ajax and XML :


http://www.searchandyou.com/

----------------------------------------------------- HTML-----------------------------------------------------
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8? />
<script src=”javascript/jquery-latest.pack.js” type=”text/javascript”></script>

</head><body><h1>Using jQuery and XML to populate a drop-downs</h1>
<form>

<select id=”myselect”></select>

<select id=”details”><option>Select from previous</option></select>

</form>

</body></html>

-----------------------------------------------------------
                      XML
-----------------------------------------------------------
<?xml version=”1.0? encoding=”iso-8859-1??><dropdown><menuitem><title>About Me</title><values><value>Select from ‘About Me’ to see</value></values></menuitem><menuitem><title>Education</title><values><value>Usability of xml</value>
<value>M.B.A.</value>

<value>M.C.A</value>

<value>B.C.A</value>

<value>B.S.C.</value>

</values>

</menuitem>

<menuitem>

<title>My Skill set</title>

<values>

<value>Expert of programming</value>

<value>XHTML and CSS</value>

<value>Asp.netand  csharp</value>

<value>Javascript and JQuery</value>

<value>PERL</value>

</values>

</menuitem>

<menuitem>

<title>My dream Companies to work with</title>

<values>
<value>Amazon</value>

<value>Microsoft</value><value>Google</value>
<value>Yahoo</value>
<value>Facebook</value>

</values>

</menuitem>

<menuitem>

<title>My Hobbies</title>

<values>

<value>Playing sports</value>

<value>Learning new things</value>

<value>Reading books and blogs</value>

<value>Poetry</value>

<value>Traveling</value>

</values>

</menuitem>

</dropdown>

-------------------------------------------------------------------
Now our XML is ready, so need the jQuery Ajax call to get the XML document.
-------------------------------------------------------------------------------
$.ajax({type: “GET”,url: “aboutme.xml”,dataType: “xml”,success: function(xml) {}});

---------------------------------------------------------------------------------------

//After Ajax call in place, we need to tell it what to do when XML is loaded in the success function.
//I will be using ID attribute in select drop-downs to refer.
------------------------------------------------------------------------------------------


var mySelecltvalue = $(‘#myselect’);             // first drop-down
var scndDrop = $(‘#details’);                    //second drop-down

$(xml).find(‘menuitem’).each(function(){var title = $(this).find(‘title’).text();mySel.append(“<option>”+title+”</option>”);});

 $(“#MainSel”).change(function(){
var selectedIndex = $(‘#myselect option’).index($(‘#myselect option:selected’));var newOpt = $(xml).find(“values”).eq(selectedIndex).find(‘value’).each(function(){var value = $(this).text();scndDrop.append(“<option>”+value+”</option>”);});



$(document).ready(function(){var myselect= $(‘#myselect’);
scndDrop = $(‘#details’);$.ajax({type: “GET”,url: “aboutme.xml”,dataType: “xml”,success: function(xml) {$(xml).find(‘menuitem’).each(function(){var title = $(this).find(‘title’).text();mySel.append(“<option>”+title+”</option>”);});$(“#myselect”).change(function()

{

$(“#details”).empty();

var selectedIndex = $(‘#myselect option’).index($(‘#myselect option:selected’));

var newOpt = $(xml).find(“values”).eq(selectedIndex).find(‘value’).each(function(){

var value = $(this).text();

scndDrop.append(“<option>”+value+”</option>”);

});

});}

});});
Posted by at