StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This doesn't exactly match up with your tag names, and I made a little change to the <code>data</code> string, but I think it's in line with what you're looking for</p> <pre><code><div id="dialogbox"> <select id="s1"></select> <select id="s2"></select> <select id="s3"></select> </div> <script type="text/javascript"> $(document).ready( function() { $( "#dialogbox" ).dialog({ open: function(event, ui) { var s1 = $("#s1").empty(); var s2 = $("#s2").empty(); var s3 = $("#s3").empty(); s1[0].enabled = false; s2[0].enabled = false; s3[0].enabled = false; //load first dropdown from the database var data = "coll=dropdown1&val=&action=getItems&func="; $.ajax({ url: "getItemList.php", type: "GET", cache: false, data: data, success: function (html) { s1.html(html); s1[0].enabled = true; } }); //load the second DD when the first changes s1.change( function() { s2[0].enabled = false; //disable until after ajax load s3[0].enabled = false; data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func="; $.ajax({ url: "getItemList.php", type: "GET", cache: false, data: data, success: function (html) { s2.empty().html(html); s2[0].enabled = true; } }); }); s2.change( function() { if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads s3[0].enabled = false; data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func="; $.ajax({ url: "getItemList.php", type: "GET", cache: false, data: data, success: function (html) { s3.empty().html(html); s3[0].enabled = true; } }); } }); } }); }); </script> </code></pre> <p><strong>UPDATE</strong></p> <p>Here is an example with change functions in their own functions</p> <pre><code><div id="dialogbox"> <select id="s1"></select> <select id="s2"></select> <select id="s3"></select> </div> <script type="text/javascript"> var s1, s2, s3, data; $(document).ready( function() { s1 = $("#s1").empty(); s2 = $("#s2").empty(); s3 = $("#s3").empty(); $( "#dialogbox" ).dialog({ open: function(event, ui) { s1[0].enabled = false; s2[0].enabled = false; s3[0].enabled = false; //load first dropdown from the database data = "coll=dropdown1&val=&action=getItems&func="; $.ajax({ url: "getItemList.php", type: "GET", cache: false, data: data, success: function (html) { s1.html(html); s1[0].enabled = true; } }); //load the second DD when the first changes s1.change( changeDD1 ); //load the third DD when the second changes s2.change( changeDD2 ); } }); }); function changeDD1() { s2[0].enabled = false; //disable until after ajax load s3[0].enabled = false; data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func="; $.ajax({ url: "getItemList.php", type: "GET", cache: false, data: data, success: function (html) { s2.empty().html(html); s2[0].enabled = true; } }); } function changeDD2() { if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads s3[0].enabled = false; data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func="; $.ajax({ url: "getItemList.php", type: "GET", cache: false, data: data, success: function (html) { s3.empty().html(html); s3[0].enabled = true; } }); } } </script> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload