Databases
StackOverflow2013
Postsdbo
POPopulate jquery select drop down form with multiple lists
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPopulate jquery select drop down form with multiple lists
    primarykey
    data
    text
    <p>I've seen so many different posts that pertain to my situation, but I'm still learning server side and js code, so I just don't understand how to apply it to my problem yet. </p> <p>I'm trying to build an order form to choose shirts/apparel to get screen printed. I don't have all the code in the form yet, as I'm already having problems, but here is the basic markup: (Keep in mind I plan on having a monetary value on the final selection to put towards a price estimate calculator with other sections in the form after I figure this part out.)</p> <p>I don't know how to populate the third and fourth drop down, and I can already tell with my jquery markup, that <code>if($(this).val() == "100% Polyester/100% Cotton")</code> etc. will start to repeat itself.</p> <p>HTML:</p> <pre><code> ` &lt;form&gt; &lt;select name="garment"&gt; &lt;option selected&gt;Choose An Option&lt;/option&gt; &lt;option&gt;Short Sleeve T-Shirts&lt;/option&gt; &lt;option&gt;Hoodies/Sweatshirts&lt;/option&gt; &lt;option&gt;Long Sleeve T-Shirts&lt;/option&gt; &lt;option&gt;Tank Tops&lt;/option&gt; &lt;option&gt;Shorts &amp;amp; Pants&lt;/option&gt; &lt;option&gt;Hats &amp;amp; Accessories&lt;/option&gt; &lt;/select&gt; &lt;select name="type"&gt; &lt;option selected disabled&gt;Choose an Option&lt;/option&gt; &lt;/select&gt; &lt;select name="style"&gt; &lt;option selected disabled&gt;Choose an Option&lt;/option&gt; &lt;/select&gt; &lt;select name="color"&gt; &lt;option selected disabled&gt;Choose a Color&lt;/option&gt; &lt;/select&gt; &lt;/form&gt;` </code></pre> <p>jquery:</p> <pre><code> `$(document).ready(function() { $garment = $("select[name='garment']"); $type = $("select[name='type']"); $style = $("select[name='style']"); $garment.change(function() { if($(this).val() == "Short Sleeve T-Shirts") { $("select[name='type'] option").remove(); $("&lt;option&gt;100% Cotton&lt;/option&gt;").appendTo($type); $("&lt;option&gt;Blended&lt;/option&gt;").appendTo($type); $("&lt;option&gt;100% Polyester/Athletic&lt;/option&gt;").appendTo($type); } if($(this).val() == "100% Cotton") { $("select[name='style'] option").remove(); $("&lt;option&gt;Regular Fit&lt;/option&gt;").appendTo($style); $("&lt;option&gt;Premium Slim/Fashion Fit&lt;/option&gt;").appendTo($style); $("&lt;option&gt;Women's Cut&lt;/option&gt;").appendTo($style); } if($(this).val() == "Blended") { $("select[name='style'] option").remove(); $("&lt;option&gt;Regular Fit&lt;/option&gt;").appendTo($style); $("&lt;option&gt;Premium Slim/Fashion Fit&lt;/option&gt;").appendTo($style); $("&lt;option&gt;Women's Cut&lt;/option&gt;").appendTo($style); } if($(this).val() == "100% Polyester/Athletic") { $("select[name='style'] option").remove(); $("&lt;option&gt;Men's&lt;/option&gt;").appendTo($style); $("&lt;option&gt;Women's&lt;/option&gt;").appendTo($style); } }); });` </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USPotatrick
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPopulate jquery select drop down form with multiple lists
      1. This table or related slice is empty.
      1. VTUpMod
    1. COAre you comfortable using ajax whether it be via jQuery or some other library?
      singulars
      1. POPopulate jquery select drop down form with multiple lists
      1. USjeremysawesome
    2. COYou might check out this library. It seems that you are wanting to roll your own faceted-search implementation. This has got that all setup for you: http://eikes.github.io/facetedsearch/.
      singulars
      1. POPopulate jquery select drop down form with multiple lists
      1. USjeremysawesome
    3. COHaven't used it before, from what I've read on other/similar posts using ajax, I need to put the variable data in a database and pull from that?
      singulars
      1. POPopulate jquery select drop down form with multiple lists
      1. USPotatrick
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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