I have three drop-down menus for each sample shirt; product, colour and grade. Not all products are available in all colours and/or grades. I would like to disable the options that are not available based on the users selection.
I've tried using this answer here (using a radio select). Unfortunately, I can't get it to work with an option-selected input.
This is what I'm working on - quartus.ca/select-options.html
Any guidance would be appreciated.
You need to dynamically clear and re-insert the OPTIONs on every change, based on your own business logic. You cannot simply disable arbitrary items in a <SELECT> .
Related
I am trying to have a Semantic UI dropdown menu which allows additions but I don't want user to have more than 4 selection.
When user added 4 items to his selection, 4 labels will be added, now he shouldn't be able to add more labels to his selection.
How can I achieve that?
You can use the select2.js for the multiple select drop down with limitation.
https://select2.org/getting-started/basic-usage
For more appropriate solution please share your code here.
I have a form that has a drop-down of dates. What I want to do is for the dates to not appear until another drop-down has an option selected because this other drop-down will determine what dates show and what ones don't.
I have created two drop-down menus one without the dates that will display until the other drop-down has an option selected and another with all of the dates in. How can I get this one to appear exactly where the one without the dates was?
I am a novice when it comes to jQuery and JavaScript I have tried a couple of basic things but it doesn't seem to be working.
Can anyone help me please?
You can use jQuery change event
$("#form").change(function() { // some logic here });
Here is jsfiddle demo http://jsfiddle.net/a92b40w9/
Here you can get some smart stuff about events in jQuery https://api.jquery.com/category/events/ pay attention to those associated with form and input
I have requirement to use custom dropdown menu.
I have searched a lot for a custom combobox implementation but I didn't find one that matches my requirements, namely:
I need up/down arrows on the side of the combobox. When the user clicks one of them, the value changes, but not list should be displayed.
The graphic design is similar to this one: http://jamielottering.github.com/DropKick/
Try out the following
http://www.htmldrive.net/items/demo/541/jQuery-UI-Spinner-numeric-stepper
http://www.egrappler.com/contents/smartspin/demo/spinner.htm
http://wiki.jqueryui.com/w/page/12138077/Spinner
I am creating a web page which will have a Select element with a number of Options. Each option represents two values: a code and a human-readable string. I would like to allow the user to toggle a setting (on the same page) which would dynamically toggle the select so that just the code or the human-readable string is visible.
I have thought of a couple of ways of doing this:
When the toggle is pressed, I re-create the page and the appropriate Options are loaded into the Select. This has the disadvantage of clearing all of the other fields on the page.
Having 2 Selects where 1 is always hidden. One Select has options with codes. The other Select has options with human-readable strings. The toggle would hide / show the appropriate Select. This has the disadvantage in that I have to manually keep the 2 Selects in sync.
Also note there will be a number of Selects that need to be toggled on any one page.
Any help greatly appreciated.
Thanks,
Phil
you can use option title to hold second string and swap it on toggle with option.innerHTML
<option title="human-readable string">short</option>
swap to
<option title="short">human-readable string</option>
I say it depends on the datasize your selects will be holding. If it's a big chunk you are better served with a kind of your first idea.
Are your selects dynamically growing (like user adding options and so on)? If yes i would go the AJAXian way and do kind of the second idea.
I'm trying to create a product page layout that allows a customization of a product. Basically, a series of drop downs with each successive drop down populated with options based on what has been selected so far. So like this:
Drop down 1: Product Variant (user selects productvariationb, drop down 2 then is populated with options for productvariationb).
Drop down 2: Product color (user selected productvariationb in drop down 1, now that they select "brown" in drop down 2 the image should change to a brown version of productvariation b).
And so on, with the image changing (and options populating) each time according to what has been selected.
Can I do this with JS and does anyone know of a script similar that I can edit, or what functions of JS I need to look into to accomplish this?
Here I made you this : http://jsfiddle.net/moeishaa/H9fF2/
It is working with jQuery. Play with it and let me know if this helped :-)
I know it looks very static but you can render the drop-down on page load and populate the options object as well. I am sure you can find plug in and add-ons. This is a very short amount of code and can be customized.
I think the best resource for example code would be looking at some JavaScript or JQuery examples on creating expandable menus (more specifically ones that mimic folder structures). They usually operate by decorating an unordered list.
You could create a static unordered list and have the image change based on what item you are hovering over. Alternatively, you could use some AJAX to dynamically populate additional parts of the list as you hover over different levels. Both of those would most likely be easily accomplished with JQuery. Here's a page with some menu examples that might give you some ideas:
JQuery Navigation Menus