I am using a modified version of the jquery plugin jquery.chained.js to filter out select box options and checkboxes based on another value of a select box. However, now I am needing to filter a select box based on what options 2 of the previous select boxes are.
I have 3 select boxes.
Staff
Rooms
Services
and a few checkboxes OR select boxes for
Addons
The above addons depends on a preference to either show it as checkboxes or dropdowns
The way it is right now if you change Staff then the Services and Addons options will change to what ever services that staff has access to. However I now need to make it so that Services and Addons will set based on what Staff has access to those Services and what Rooms Offer those services.
Is anyone able to help me modify this already modified script to add support for multiple select boxes? I want to try and keep it generic as we may possible be using this chained to script for other elements as well.
To sum up what I am looking for is to add support for Rooms select box to further filter down the Services and AddonServices options.
Example code can be found http://bit.ly/uzEDL2
EDIT: The checkboxradio() is for jquery Mobile so don't worry about those.
To make child select depend on values of two parents use classname like first\second. Note that if you have really complicated select structure maintaining this kind of classes will get cumbersome. In that cause it might be easier to use the remote version of the plugin.
Example taken from plugin documentation. In this example diesel engine is available only for BMW 3 and 5 series Sedans. This is achieved by using classnames series-3\sedan and series-5\sedan.
<select id="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>
<select id="model">
<option value="">--</option>
<option value="coupe" class="series-3 series-6 a5">Coupe</option>
<option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
<option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
<option value="sportback" class="a3 a5">Sportback</option>
</select>
<select id="engine">
<option value="">--</option>
<option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option>
<option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
<option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option>
</select>
$("#model").chained("#series");
$("#engine").chained("#series, #model");
Note that your HTML is not valid. Single number is not a valid class name. Class name must begin with an underscore letter [a–z], underscore [_]or dash [-] then followed by numbers, letters, underscores and dashes. Better explanation can be found from: Allowed characters for CSS identifiers.
Related
I am working on implementing a data-live-search element within a select. I currently have it so that the live search results are returned only if the option startsWith the search term, through usage of: data-live-search-style="startsWith".
I would like to have the results include options that also just include the search term. If I remove the data-live-search-style="startsWith", I see this behavior; however, I want results that match the startsWith condition to be displayed at the top, such that if it is necessary, a single optgroup label will display twice.
For example, suppose I have the following select set up, with a data-live-search included:
<select id="sp" class="form-control selectpicker" data-live-search="true" data-live-search-style="startsWith" multiple>
<optgroup label='Vegetables'>
<option value='celery'>Celery</option>
<option value='carrot'>Carrot</option>
<option value='artichoke'>Artichoke</option>
</optgroup>
<optgroup label='Fruits'>
<option value='cherry'>Cherry</option>
<option value='apple'>Apple</option>
<option value='papaya'>Papaya</option>
</optgroup>
</select>
If the user types in "ch", the search results should be Cherry (under Fruits optgroup label) and then Artichoke (under Vegetables optgroup label). Using data-live-search-style-"startsWith" means that I currently only see Cherry. Is there any way to order by "startsWith", and then display options that "contain" the search term? Thanks!
I think you can apply select2 plugin for that situation.
I have a long list (of an undetermined length, that can keep on growing) of values. For example:
<select>
<option value="1">1, some test</option>
<option value="2">2, some text</option>
<option value="3">3, some text</option>
<option value="4">4, some text</option>
<option ...... add 100 more options> ..
</select>
What would be the best practice/user friendly way to support such a long list? I imagine that a user might find it frustrating to scroll through a super long list.
I am trying to minimize the user's scroll time, by presenting the most recent values at the top of the drop down, but if she/he would like to go to the first element in the drop down it would require a lot of scrolling.
Thanks
Instead of using <select>, how about changing it to HTML5 <datalist>, which is like this:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
By the way, you can type the first letter using the <select>, so my suggestion will be sort your data according to the first letter. Because it will help the user to go to the sub-option directly.
Maybe add a searchfield to the dropdown?
Something like this: http://jsearchdropdown.sourceforge.net/
What kind of data would you like to display ? Maybe there is another way than select to display them ? In fact, for dozens of items, select is not the best choice, unless you use by example a JQuery plugin like jsearchdropdown and in this case the user must know what he's looking for.
So i have these options.
<option value="bentley">Bentley</option>
<option value="ferrari">Ferrari</option>
<option value="honda">Honda</option>
<option value="toyota">Toyota</option>
<option value="peugeot">Peugeot</option>
<option value="citroen">Citreon</option>
If i click on honda, the honda cars are displayed. IF toyota then toyotas..and so on.
I would like to make an option, where i only reference the luxury cars. Just do not know how to make it work.
<option value"ferrari:bentley">Luxury cars</option>
Any ideas?
Note: It can help others, who would like to reference more than one value in an option. As I was searching around for 1.30 hours there is not much out there.
Thank you in advance
You could use an optgroup
JSfiddle
<select name="carss">
<optgroup label="Luxury cars">
<option>Ferrari</option>
<option>Bentley</option>
<option>Rolls Royce</option>
</optgroup>
<optgroup label="Others">
<option>Honda</option>
<option>Ford</option>
<option>Toyota</option>
</optgroup>
</select>
For multiple values in option tag use below code
<option value="{'num_sequence':[0,1,2,3]}">Option one</option>
<option value="{'foo':'bar','one':'two'}">Option two</option>
First one is using array and second one is using Object.
Refer this for more info.
You should do like this
create a Table with Car names and its type like
Luxury,Sedan,etc.
Allow users to select cars based on types or car name.(dont combine
both)
Then when user select Cars by type you need to get cars from first
table corresponding to that class name
I have a page with multiple dropdowns and I want to disable multiple options in all of those dropdowns.
The options I aim to disable share certain characteristics, namely that they're identified with two classes each. Many of the options in all the lists share the same classes and I want to add several buttons that enable or disable options based on those classes.
My issue is, that the standard ways I have seen here target options
by select element
by number.
But mine are dynamically generated and the options that I'm trying to disable are not always next to each other.
Here's a snippet of one of the dropdowns:
<select name="m1">
<option value="Abyss Guard, Cereberus" class="Covert Beast">Abyss Guard, Cereberus</option>
<option value="Abyss Guard, Cereberus+" class="Covert Beast">Abyss Guard, Cereberus+</option>
<option value="Achlis+" class="Covert Beast">Achlis+</option>
<option value="Adept Devil+" class="Impulse Demon">Adept Devil+</option>
<option value="Agares+" class="Covert Demon">Agares+</option>
<option value="Airship of Death+" class="Psycho Creation">Airship of Death+</option>
<option value="Ancient Huge Statue+" class="Psycho Creation">Ancient Huge Statue+</option>
<option value="Anna Thorn Maiden" class="Impulse Demon">Anna Thorn Maiden</option>
<option value="Anna Thorn Maiden+" class="Impulse Demon">Anna Thorn Maiden+</option>
<option value="Anomalocaris+" class="Impulse Beast">Anomalocaris+</option>
<option value="Apopisu of Chaos+" class="Psycho Beast">Apopisu of Chaos+</option>
<option value="Arachno Chi" class="Psycho Crawler">Arachno Chi</option>
<option value="Arachno Chi+" class="Psycho Crawler">Arachno Chi+</option>
<option value="Arbitration Demon+" class="Psycho Demon">Arbitration Demon+</option>
<option value="Armored Black Tiger+" class="Impulse Beast">Armored Black Tiger+</option>
<option value="Armored Bucephalus+" class="Covert Beast">Armored Bucephalus+</option>
</select>
This is by no means an exhaustive list, there's a couple of hundred options for each dropdown, though all the dropdowns contain the same list. As you can see, the list is sorted alphabetically, not by class.
I am looking to disable and enable options with a button based on one of the two classes, and a disabled status should override an enabled status. The standard document.getElementById('m1').options[number].disabled doesn't really help me here as the list is dynamically generated and I do not know where a specific option will end up.
Part of the site's aim is to minimize the amount of reloading needed and at the same time minimize the amount of javascript being executed, to speed up responsiveness. Is there a way I can select all options in all of the dropdowns that are of any specific class?
Here's one way of doing it. If you have that many options and they don't change, consider caching the result of document.querySelectorAll so that you don't have to find all the options again each time you want to disable/enable them.
http://jsfiddle.net/uj86d/
HTML
<select>
<option value="test1" class="red">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3" class="red">Test 3</option>
<option value="test4">Test 4</option>
</select>
<select>
<option value="test1">Test 1</option>
<option value="test2" class="red">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4" class="red">Test 4</option>
</select>
<button>Disable reds!</button>
JS
//disable all options with a red class
document.querySelector('button').addEventListener('click', function () {
var redOptions = document.querySelectorAll('option.red'),
i = 0,
len = redOptions.length;
for (; i < len; i++) {
redOptions[i].disabled = true;
}
});
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.