Recursive Drop Down Image Selection? - javascript

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

Related

Multi select Dropdown with filter

I have a requirement where in I have to create a multi select drop down where the elements can be searchable and the count of selected items should be displayed upon selection.
I have found the partial part of the requirements at this link
But not sure how to make the drop down collapsible and expandable
Wire frame image as below
Has anyone come across and worked on such requirements?
Well it depends also a bit if you are using plain Javascript or if you are also using a Framework like Angular/vue/ember or so
here is one component that looks like it makes what you want
http://selectize.github.io/selectize.js/

jQuery - having icons at the end of drop down list items with independant actions

Ive looked around a bit and not found anything so im not even sure if this is possible.
What I want to do is have a drop down list. Each list item is a specific type of a view for a list. Is it possible to add an icon at the end that when clicked will fire off a different action to just selecting the item?
So the user opens the drop down. They see View 1. At the end there is a pencil button image. If they select View 1 the list view changes. If they select the pencil it opens up the edit View dialog for that view.
Is this even possible using javascript/jQuery?
It won't be do-able with the standard select element, however it's definitely possible using divs and heavy Javascript/jQuery.
Something similar to how the jQuery plugin Chosen works - it hides the original select element and rebuilds it with divs, adding interaction with jQuery (obviously).

How to implement dynamic taxonomy navigation / hierarchical drop down list using ajax/jQuery?

I'd like to provide my users a way to navigate a taxonomy by successively drill down ono drop down lists.
A simple example would be something like ebay's categories. Say you pick the category "Clothing", the next drop down list would display all the sub-categories under Clothing such as "Shorts", "Pants", "Coats" etc. And this can go on arbitrarily deep.
I looked at the jQuery plug-in mcDropdown. The interface looks really nice. However it seems to require the entire taxonomy to be passed to the plug-in in one go. Other plug-ins I looked at also have this limitation.
I need somethinig that retrieves & displays data dynamically. So after the user picks "Clothing", the UI sends that selection back to the server, which then sends back a list of sub-categories of "Clothing", so on and so forth.
Is there any jQuery plug-in that does that? Or what would it take to implement that in plain jQuery?
I'd prefer jQuery, but other frameworks would be fine too.
I do not know of some plugin for this so here is a breakdown of the process..
Should not take long to implement.. (i do not attempt it as it relies on your server-side technology and preference between html/xml/json for the ajax call returns..)
jquery Ajax call to bring 1st level data
create dropdown with jquery and add fetched data to it
List item
use jquery .data() method on the new dropdown a autoincrementing counter (will be used to remove all later instances when you change something in a dropdown that is not the last)
bind a handler to the .change() event of the new dropdown that will repeat the entire process, passing as parameter to the ajax call the id of the selection (should create the logic once and just invoke it manually the first time..)
in the same handler, check if the counter of the select box is not the last one, find all dropdowns and remove those with counter greater than this dropdown..
add the new dropdown in the DOM..
I hope it makes some sense..
I once wrote a plugin that might be what you're looking for; if not, at least it should give you a good place to start coding from (hopefully :)

Multiple/addable drop down lists in asp.net mvc

Is it possible to have multiple drop down lists in asp.net mvc?
What I'm trying to do is have a drop down list, say with many colours, Red, Green, Blue, Black etc. Then next to it a text box which the user can enter a number.
However there should be then a small + little sign next to it so that another drop down list appears underneath it allowing the user to select another colour. The number of times they can add drop down boxes should ideally be unlimited. Is this possible? I know I can put hidden drop down lists underneath them then enable/show them when the user clicks the + button, but this will only mean a limited number of drop down lists!
Thanks
This has nothing to do with ASP.net mvc. It is a pure JavaScript. Use jQuery to add ddl dynamically.
Sure, you can add as many pull-down menus to your page as you like (and it sounds like you are comfortable with the scripting to do so). Just make sure to add a unique name to each of those menus so you can access the values in your controller.
you can add an ajax action link that will update a div with a drop down list and the same div. So you can add as many dropdown list you want.

Auto populate combobox

IN my case i want to implement multi select auto complete combobox using html,javascript.
Is there any body who knows how to implement it.
Which will be similar to text field shown in stackoverflow while adding multipal tags to any question.
If you are talking about multiple drop down boxes that are linked, so that the selection in the first drop down menu determines the possibilities in the next, then the ASP.NET Toolkit has a nice cascading drop down sample. This will only, of course, come in handy if you are programming in ASP.NET. I would not recommend trying to reverse engineer the solution.
What do you mean by auto populate?
If you want to populate the drop down box dynamically you can just use a normal HTML Select tag and use Ajax to fetch the list of values to be shown in the drop down

Categories