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
Related
Although this may not be the best UI implementation, I have a drop-down list with several elements that must be grouped using multiple placeholders (e.g. ----- group 1 -----). I'd like to make the place-holders un-selectable.
I found a solution for a single placeholder here:
How do I add an unselectable and customizable placeholder to a select box
but it doesn't seem to be extendable to multiple place-holders.
Thanks in advance for any ideas.
Not angular specific, but can you use select option groups?
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Check out http://www.w3schools.com/tags/tag_optgroup.asp and their demo at
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
I am trying to disable option items in a dijit/Form/FilteringSelect. Here is code
<select id="filtSelect" dojoType="dijit.form.FilteringSelect">
<option disabled="disabled">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Please help me.
You can do it this way: ( Vers. 1.9 )
<select data-dojo-type="dijit/form/" id="count" name="count">
<option disabled="disabled">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Here's the full fiddle for my Example above(Edited by Thomas Upton): http://jsfiddle.net/tupton/266C4/
and here the reference from dojo: http://dojotoolkit.org/reference-guide/1.9/dijit/form/FilteringSelect.html?highlight=filteringselect
In the 1.6 Vers it must look like:
<script>
dojo.require("dijit.form.FilteringSelect");
</script>
<body class="claro">
<select dojoType="dijit.form.FilteringSelect" id="fruit" name="fruit">
<option value="AP" disabled>
Apples
</option>
<option value="OR" selected>
Oranges
</option>
<option value="PE">
Pears
</option>
</select>
</body>
Here the fiddle for this Version: http://jsfiddle.net/Q4zw6/
It's important that you load the instance of dijit.form.filteringSelect to use it.
Regards, Miriam
I don't believe you can disable options with dijit/form/FilteringSelect because it is store-based and is supposed to let a user enter any text.
There is a property called displayedValue, which you can use to set whatever you want. However, with FilteringSelect, any text that isn't an option is marked as erroneous input, as seen by the following code and this jsfiddle.
<select data-dojo-type="dijit/form/FilteringSelect" data-dojo-props="displayedValue: 'Select'" id="count" name="count">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
You could use a dijit/form/ComboBox in exactly the same manner; the difference between FilteringSelect and ComboBox is that the latter allows any input. See the documentation for more information.
The issue is that FilteringSelect relies on dojo data store, as others have pointed out. So if you don't create that manually, it will happen behind the scenes and you just won't know how to reference it. But on second thought, looking at the API I notice FilteringSelect has a property named store.
So, you either need to create the data store yourself & initialize the FilteringSelect with it (http://dojotoolkit.org/reference-guide/1.9/dijit/form/FilteringSelect.html) or retrieve it by using dijit's byId and then accessing the "store" property.
Then, manipulate that data store. Maybe store a temporary copy before you remove the option if you want to restore it after. If you look up data store I'm sure removing an option is trivial. Sometimes with widgets it happens that you need to trigger a re-rendering method also to have it update after (you can usually find some method in the widget's API for this, sometimes "reset"), though I believe with stores it may watch them more intelligently.
I have a dropdown menu with different option groups. If someone selects an option, how can I check which optgroup it belongs to? For example if 'ferrari' were selected, how would you determine which optgroup it belongs to?
Feel free to use jQuery or raw javascript.
<select name="testSelect">
<optgroup label="fruits">
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="pears">Pears</option>
</optgroup>
<optgroup label="cars">
<option value="ford">ford</option>
<option value="toyota">toyota</option>
<option value="ferrari">ferrari</option>
</optgroup>
</select>
You can do this using jQuery:
$('select').change(function() {
var selected = $(':selected', this);
alert(selected.closest('optgroup').attr('label'));
});
See a live example here: http://jsfiddle.net/jkeyes/zjLCp/1/
Update: Yes you could use parent http://jsfiddle.net/jkeyes/zjLCp/2/
alert(selected.parent().attr('label'));
Well, in pure js:
this.options[this.selectedIndex].parentNode.label
Not a single function call and less code to boot. :-)
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.
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.