jquery - Creating drop downs from a unordered list -
there unordered list want create drop downs using jquery. want create 6 drop downs this:
producttype - abc, xyz
reportnames - report1, report2
startdate - 2010, 2011
startmonth - may, june
enddate - 2010, 2011
endmonth - may, june
and clicking on these drop down elements update rest of drop downs. 1 guy stackoverflow helped me create these drop downs out of json object. want have same thing ul , lis. please me out!!
here demo of 1 created json - http://jsfiddle.net/lnv9d/7/
and here unordered list -
<html> <head> <meta http-equiv="content-type" content="text/html; charset=us-ascii"> <style> <!-- .decisiontree { display:none } --> </style> </head> <body> <ul class="decisiontree producttype"> <li><span>abc</span> <ul class="reporttype"> <li><span>report 1</span> <ul class="reportyearstart"> <li><span>2011</span> <ul class="reportmonthstart"> <li><span>july</span> </li> <li><span>june</span> </li> </ul> </li> <li><span>2010</span> <ul class="reportmonthstart"> <li><span>december</span> </li> <li><span>november</span> </li> </ul> </li> </ul> <ul class="reportyear"> <li><span>2011</span> <ul class="reportmonth"> <li><span>july</span> </li> <li><span>june</span> </li> </ul> </li> <li><span>2010</span> <ul class="reportmonth"> <li><span>december</span> </li> <li><span>november</span> </li> </ul> </li> </ul> </li> <li><span>report 2</span> <ul class="reportyearstart"> <li><span>2011</span> <ul class="reportmonthstart"> <li><span>july</span> </li> <li><span>june</span> </li> </ul> </li> <li><span>2010</span> <ul class="reportmonthstart"> <li><span>october</span> </li> <li><span>september</span> </li> </ul> </li> </ul> <ul class="reportyear"> <li><span>2011</span> <ul class="reportmonth"> <li><span>april</span> </li> <li><span>march</span> </li> </ul> </li> <li><span>2010</span> <ul class="reportmonth"> <li><span>august</span> </li> <li><span>july</span> </li> </ul> </li> </ul> </li> </ul> </li> <li><span>xyz</span> <ul class="reporttype"> <li><span>report 3</span> <ul class="reportyearstart"> <li><span>2020</span> <ul class="reportmonthstart"> <li><span>july</span> </li> <li><span>june</span> </li> </ul> </li> <li><span>2021</span> <ul class="reportmonthstart"> <li><span>december</span> </li> <li><span>november</span> </li> </ul> </li> </ul> <ul class="reportyear"> <li><span>2022</span> <ul class="reportmonth"> <li><span>july</span> </li> <li><span>june</span> </li> </ul> </li> <li><span>2023</span> <ul class="reportmonth"> <li><span>december</span> </li> <li><span>november</span> </li> </ul> </li> </ul> </li> <li><span>report 4</span> <ul class="reportyearstart"> <li><span>2024</span> <ul class="reportmonthstart"> <li><span>july</span> </li> <li><span>june</span> </li> </ul> </li> <li><span>2025</span> <ul class="reportmonthstart"> <li><span>october</span> </li> <li><span>september</span> </li> </ul> </li> </ul> <ul class="reportyear"> <li><span>2026</span> <ul class="reportmonth"> <li><span>april</span> </li> <li><span>march</span> </li> </ul> </li> <li><span>2027</span> <ul class="reportmonth"> <li><span>august</span> </li> <li><span>july</span> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </body>
i did 3 of selects, should have idea there on:
you should use direct children selectors $("parent > children") select direct li's , spans. , since none of stuff has id's, need :contains selector find spans text.
$("#root > li > span").each(function(){ $("#producttype").append("<option value='" + $(this).text() + "'>" + $(this).text() + "</option>"); }); $("#producttype").on("change",function(){ var selected = $(this).val(); //selected value $("#reportname").empty(); //clears reports $("#reportname").append("<option value='-1'>select</option>"); //adds empty item //selector: selects li's text (abc, or xyz), - select span children $("li:contains('" + selected + "') > ul > li > span").each(function() { $("#reportname").append("<option value='" + $(this).text() + "'>" + $(this).text() + "</option>"); }); }); $("#reportname").on("change",function(){ var selected = $(this).val(); //selected value $("#startdate").empty(); //clears reports $("#startdate").append("<option value='-1'>select</option>"); //adds empty item //selector: selects li's text, - select span children $(".reporttype > li:contains('" + selected + "') > ul > li > span").each(function() { $("#startdate").append("<option value='" + $(this).text() + "'>" + $(this).text() + "</option>"); }); }); give main ul id:
<ul id="root" class="decisiontree producttype"> here working: jsfiddle
notice after second select use class selector (like .reporttype). can start using better select elements.
Comments
Post a Comment