HTML limit a drop down menu based on previous menus selections.?

Question

Here is my problem, i'm building an ecommerce site using mysql and php and during this the user selects options from a drop down menu, and then when they add to the cart it queries the cart based on values in those fields. Now, I have to main styles and each style is only available in select colors, so basically if they select style 1 then they get blue and green in the next field to select from, and if they pick style 2 then red and white are their options. I assume to do this I'll want to use javascript since I want this to run client side, is there any easy way to do this using javascript/jquery?

Answer 1

I encounter the same thing when I was developing my ecommerce application using OpenCart previously too.



Consider the following:





--Please Select--

Colour Style 1

Colour Style 2





Summary of my method:

For each tag, we add in metadata. For example



Colour Style 1



The data is inserted into the curly bracket next to option_data class. Using jQuery metadata plugin, we can retrieve the “color” variable data. The data will be “blue,green”. Next, we convert this comma separated data into an array by using JavaScript split function. Now, we can create a new drop down with option data using metadata retrieved. We can create new drop down using jQuery.



It runs using JavaScript only because we want our users to see the changes to be reflected immediately instead of requesting from the server each time.



If you want a sample on this, see this http://kennykee.com/?p=169

Answer 2

I think that what may help you is AJAX. AJAX is when JavaScript communicates with the server-side programming, the PHP. One good thing about AJAX is that the web page doesn't have to be refreshed, an update of just part of the data can occur without refreshing the whole page.



JavaScript can access what's called the document object model (or DOM). The DOM includes all of the HTML elements and all of the CSS styles on a page.



JavaScript can, between accessing data on the server with AJAX, and accessing the DOM to get or change the web page, do a lot.



One thing to watch out for is that JavaScript can be turned off in a web browser, but you can just be aware of that and have your web pages that rely upon JavaScript have an error message that's displayed when JavaScript is turned off.



AJAX, since it accesses the server, has security concerns too. You'll need some sort of login (which you have anyway for eCommerce) but I saw a whole book that talked about AJAX and security.



AJAX Tutorial:

http://www.tizag.com/ajaxTutorial/



JavaScript DOM Tutorial:

http://www.w3schools.com/htmldom/



You asked about jQuery. You may know this but jQuery is written entirely in JavaScript, it does things for you that are commonly needed in JavaScript. The advantage of jQuery is that the code is already written for you, the drawback is that there's that much more to learn. jQuery's especially useful when you want to support multiple browsers.

Answer 3

While that you could make drop down menus with this: About me aspects After studying your description, it looks like it's not what you wish to have. You should utilize JavaScript to create the drop down menus. Even supposing you decided to move with tag substitute, you possibly can need JavaScript to take the person to the chosen menu in any case, unless you use personal home page. Moreover, there is a JavaScript framework referred to as jQuery which already comes with premade code for animated drop downs, if I remember thoroughly.

anonymous

2016-09-17 11:18:52 UTC

I was wondering much the same thing

stacy

2016-09-19 04:43:23 UTC

Well, it depends..

ⓘ

This content was originally posted on Y! Answers, a Q&A website that shut down in 2021.

about - legalese

Loading...

Answer 4

I was wondering much the same thing

Answer 5

Well, it depends..