So I am a newbie on Wordpress working with a theme to make a car platform. Unfortunately, on the theme, the car-selling functionalities differ from what we need. One of those things is: show or hide options based on previous selection with dropdown lists.
Quick example: If 'BMW' is chosen on 'Make', then only show '1 series' '3 series' '5 series' on 'Model', if '3 series is chosen, then only show 318i 320i 330i on 'Engine', aso. From a logical point of view, it is so easy, but I have no clue how to translate this into code. Luckily, I've found pretty good code here already, but this works only for the next dropdown list. My question is, how does the javascript/jquery code have to look like so you can make more than 2 conditional dropdown lists? You could take Engine as an example. Thank you
HTML code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="req_make">Make</label>
<select id="req_make" name="make">
<option disabled="disabled" selected="selected" value="">Choose Make</option>
<option class="BMW" value="BMW">BMW</option>
<option class="Audi" value="Audi">Audi</option>
<option class="VW" value="VW">VW</option>
</select>
<label for="req_model">Model</label>
<select id="req_model" name="model">
<option disabled="disabled" selected="selected" value="">Choose model</option>
<option class="BMW" value="1er">1er</option>
<option class="BMW" value="3er">3er</option>
<option class="BMW" value="5er">5er</option>
<option class="BMW" value="7er">7er</option>
<option class="Audi" value="A4">A4</option>
<option class="Audi" value="A8">A8</option>
<option class="Audi" value="Q7">Q7</option>
<option class="VW" value="Golf">Golf</option>
<option class="VW" value="Touran">Touran</option>
</select>
<label for="req_engine">Engine</label>
<select id="req_engine" name="engine">
<option disabled="disabled" selected="selected" value="">Choose engine</option>
<option class="BMW" value="7er">7er - 730i</option>
<option class="BMW" value="7er">7er - 730Li</option>
<option class="BMW" value="7er">7er - 735i</option>
</select>
Javascript code:
$(function(){
$("#req_make").on("change",function(){
var levelClass = $('#req_make').find('option:selected').attr('class');
console.log(levelClass);
$('#req_model option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}
});
});
});
You can specify any number of selectors to combine into a single result. So change $('#req_model option').each(function () { ... to $('#req_model option, #req_engine option').each(function () { ... to solve this.
I just did it on my own. It is working, but of course I don't know if it's the right way to do it. I am taking the value of the former list and assigning it to the class of the next, while changing attr('class') to attr('value'). https://jsfiddle.net/agdkw1xm/
Related
What I'm trying is something pretty basic, but I can't do it because the examples I see aren't anything similar to what I'm looking for.
There are 2 select, one of them you choose manually and the other dynamically changes depending on the value of the first one.
If the value of the first select is 1, that in the second one they only appear whose value is 1 as well.
I want to make it 100% JavaScript, I don't want any JQuery.
HTML.php
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
JavaScript.js
function catch_value_types() {
var types_value_option = document.getElementById("types").value;
// What should I put here?
}
Loop through the options and hide if value doesnot match
function catch_value_types() {
const selectedValue = document.getElementById("types").value;
const select2 = document.getElementById("food");
Array.from(select2.options).forEach((node) => node.style.display = node.value === selectedValue ? "block": "none");
}
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option>Please Select</option>
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
I have two selection boxes, the default value is - and i want to pick something else for both, my first problem is both fields have dynamic id like prod-685209-Size so i'm having trouble accessing with id.
I have the following HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
So i executed the following:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
It worked on the front side, showing my new options but it didn't prompt the backend as it is not actually selecting the options. Backend works fine when i click to these options by hand, basically i need another solution to choose these options.
If I don't misunderstood your requirement then you need something like this. Just add two different ids to your select element and attach a change event listener. For example size and color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
You need to add .validate() after your dom commands to actually prompt the page.
I am using the Jquery multi select tool located here http://www.erichynds.com/blog/jquery-ui-multiselect-widget and I got everything working great. I have a very long list of items and divded by optgroups. You have to scroll quite a lot of get to the last item so im wondering if theres a way to collapse the opt group by default?
I looked at documentation regarding this script but didn't see any functions to collapse by optgroup.
<select name="selSea" id="selSeaShells" size="5" multiple="multiple" onchange="loopSelected()">
<optgroup label="Group 1"/>
<option value="test">test</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<optgroup label="Group2"/>
<option value="test">test</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
<optgroup label="Group3"/>
<option value="test">test</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
</select>
You may try Select2. Also, you may refer to this Stackoverflow discussion.
Using Select2:
In your CSS, hide the sub results by default:
.select2-result-sub > li.select2-result {
display: none;
}
Then add this to your Javascript file:
$('.select2-results').on('click', 'li', function(){
$(this).find('li').show();
});
I'm building a WordPress site that uses Custom Posts and Custom Fields to show a vehicle inventory. I would like the visitor to be able to filter the posts by Taxonomies...
The plugin I use for drilling the available Taxonomies (Query Multiple Taxonomies) outputs all options it can find for that particular Taxonomy into a dropdown list.
To prevent the dropdown list (i.e. Model) to become too long, I would like to show only those options that are based on the previous selection.
So when the visitor selects Vehicle = Cars, the dropdown for Manufacturer should only show the car manufacturers. When the visitor selects a manufacturer, i.e. Ford, the next dropdown for selecting a model should only show the models available for the previous selected manufacturer, in this case Ford...
The labels and level-0 values don't change but when I add or change a manufacturer or model, the level-1 and/or level-2 changes.
Not that important but, if possible, it would also be nice to strip everything not needed to show up in the "filtered" dropdown. In case of the Manufacturer dropdown, level-0 and all the spaces are not needed. In case of the Model dropdown, level-0, level1 and all the spaces are not needed after selection.
I can do some simple things with JavaScript but this is not simple to me, sorry... ;-)
I searched for tips and examples and tried to make it work but no luck.
Can someone please help me to figure out how to do this in jQuery?
Here is the code,
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-0" value="motorcycles">Motorcycles</option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-1" value="ford"> Ford</option>
<option class="level-1" value="chevrolet"> Chevrolet</option>
<option class="level-0" value="motorcycles">Motorcycles</option>
<option class="level-1" value="honda"> Honda</option>
<option class="level-1" value="yamaha"> Yamaha</option>
</select>
<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-1" value="ford"> Ford</option>
<option class="level-2" value="model-1-ford"> Model 1</option>
<option class="level-2" value="model-2-ford"> Model 2</option>
<option class="level-2" value="model-3-ford"> Model 3</option>
<option class="level-1" value="chevrolet"> Chevrolet</option>
<option class="level-2" value="model-1-chevrolet"> Model 1</option>
<option class="level-2" value="model-2-chevrolet"> Model 2</option>
<option class="level-2" value="model-3-chevrolet"> Model 3</option>
<option class="level-0" value="motoren">Motorcycles</option>
<option class="level-1" value="honda"> Honda</option>
<option class="level-2" value="model-1-honda"> Model 1</option>
<option class="level-2" value="model-2-honda"> Model 2</option>
<option class="level-2" value="model-3-honda"> Model 3</option>
<option class="level-1" value="yamaha"> Yamaha</option>
<option class="level-2" value="model-1-yamaha"> Model 1</option>
<option class="level-2" value="model-2-yamaha"> Model 2</option>
<option class="level-2" value="model-3-yamaha"> Model 3</option>
</select>
You need to use javascript, or jquery.
Here is how I do it.
Get the class that is selected:
var levelClass = $('#qmt-manufacturer').find('option:selected').attr('class');
Then use the level class to hide or show
$('#qmt-model option').each(function () {
var self = $(this);
self.hide();
if (self.hasClass(levelClass)) {
self.show();
}
});
Edit:
to clarify how to use this:
it uses a slightly altered version of the code
$(function(){
$("#qmt-vehicle").on("change",function(){
var levelClass = $('#qmt-vehicle').find('option:selected').attr('class');
console.log(levelClass);
$('#qmt-manufacturer option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
<option class="car" value="cars">Cars</option>
<option class="motorcycle" value="motorcycles">Motorcycles</option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
<option class="car" value="cars">Cars</option>
<option class="car" value="ford"> Ford</option>
<option class="car" value="chevrolet"> Chevrolet</option>
<option class="motorcycle" value="motorcycles">Motorcycles</option>
<option class="motorcycle" value="honda"> Honda</option>
<option class="motorcycle" value="yamaha"> Yamaha</option>
</select>
There is another way to achieve this --- Check this Fiddle example: Fiddle
You can learn from this example and add according logic which you need for the third option box.
jQuery Code:
$('#qmt-vehicle').on('change', function () {
//alert(this.value); // or $(this).val()
if (this.value == 'cars') {
$("#qmt-manufacturer").html(
"<option class=\"level-1\" value=\"ford\"> Ford</option><option class=\"level-1\" value=\"chevrolet\"> Chevrolet</option>");
} else {
$("#qmt-manufacturer").html(
"<option class=\"level-1\" value=\"honda\"> Honda</option><option class=\"level-1\" value=\"yamaha\"> Yamaha</option>");
}
});
A Javascript might help you...
You can add an "onchange" event (in Javascript) in your "select" component. Also, add an ID for the labels.
Example:
<label for="qmt-manufacturer" id="lblManufacturer">
<select id="qmt-manufacturer" name="manufacturer"
onchange="changeManufacturer(this.value);">
Using a script tag, build your method in javascript as following:
<script type="text/javascript">
function changeManufacturer(manufacturerValue){
switch(manufacturerValue){
case ford:
document.getElementById('lblManufacturer').innerHTML = 'FORD';
break;
case chevrolet:
document.getElementById('lblManufacturer').innerHTML = 'Chevrolet';
break;
}
// And so on for other values...
}
</script>
this code above changes the Label Text running time, implement it to make changes in your second dropdown (Model)
Hope it helps you.
Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});
Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.
This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO