Enable Sequential Select Menus when you don't know the IDs - javascript

I have a set of Select Menus that are built from the variants in a product database (WooCommerce). There can be any number of them, usually from 3 to 8. Something simple like:
<select id="*Could be Anything*" name="*Could be Anything*">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
I want to enable them sequentially based on a selection being made in the previous menu. I don't need to change any options in the new menu - I just need to enable it.
So, if Select1 ≠ "Choose an option..." then enable Select2 and if Select2 ≠ "Choose an option..." then enable Select3.
The problem is I can't predict what the IDs are going to be, so I can't use a variant of:
$(function() {
$("#theID").change(function() {
if ($(this).val() == "Choose an option…") {
$("#theID_2").prop("disabled", true);
}
else
$("#theID_2").prop("disabled", false);
});
});
My question then: is there a way to sequence the enabling/disabling of Select menus using jQuery alone without knowing the ids in advance?
Is this just a crazy idea? Would I be better to try to build the javascript on the fly, reading the ids are they're written into the Selects server-side?

If the selects are in a sequential order to each other, you might be able to use JQuery.next():
http://api.jquery.com/next/
$("select").on('change', function(){
$(this).next("select").prop("disabled", false);
});
Example:
http://jsfiddle.net/Zv72Y/

If all these selects in one containers, then you can attach an event listener to each, which will unlock next select element:
HTML:
<div class='container'>
<select id="*Could be Anything*" name="*Could be Anything*">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
</div>
Javascipt:
$('.container').on('change','select', function(){
$(this).nextAll('select').first().removeAttr('disabled');
});
$().nextAll() - Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
.first() will select first select after current and remove from him attritbute disabled.
Example: jsFiddle

Related

JQuery select element val does not work on Safari

I have a select box filled with options. When my function triggers, it should select the option that is passed. This works on all browsers except for Safari. currentSelectItem is a JQuery object storing the select.
Does anyone know why this does not work on Safari and how to make it work there?
<select name="options" id="myselect">
<option value="2010">2010</option>
<option value="2011">2011</option>
</select>
$('#myselect').val(2011);
You can use .prop('selected', true)
$('#select option[value="2"]').prop('selected',true);
// Or
$('#select').val(2).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
You can use .prop('selected', true).

dynamic drop down menu for labels

I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.
in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here

How to select <select> elements with no html in them through JQuery

I have following html select elements
<select id="options1" title="prd_name" name="options">
<option value="optiona">Option A</option>
<option value="optionb">Option B</option>
<option value="optionc">Option C</option>
</select>
<select id="options2" title="prd_name" name="options"> </select>
<select id="options3" title="prd_name" name="options"> </select>
<select id="options4" title="prd_name" name="options"> </select>
Only the first select element with id="options1" has option tags in it, the rest of select elements are empty. I want to select those empty select elements so that I be able to populate options into them, without touching the first select element which already has options into it. How can I do this especially through Jquery?
You can use selector select:empty; alternatively you can use select:not(:has(option))
console.log($("select:empty"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<select id="options1" title="prd_name" name="options">
<option value="optiona">Option A</option>
<option value="optionb">Option B</option>
<option value="optionc">Option C</option>
</select>
<select id="options2" title="prd_name" name="options"></select>
<select id="options3" title="prd_name" name="options"></select>
<select id="options4" title="prd_name" name="options"></select>
try this
var $select = $("select").filter(function () {
return !$(this).find("option").length;
});
console.log($select);
$select will give you all the select boxes except the with option elements
then you can loop over $select and perform any task on it

How to change Multiple dropdown with jquery json and php

Hello Guys i want to change state based upon the country and the city according to state.
<label>Country:</label><br/>
<select onchange="getval(this)">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="" id="">
<option value="">Select State</option>
<option value="india">Orissa</option>
<option value="india">Telangan</option>
<option value="america">USA</option>
<option value="america">California</option>
</select>
<select name="" id="">
<option value="">Select city</option>
<option value="orissa">Nal</option>
<option value="orissa">Mir</option>
<option value="Telangan">Hyd</option>
<option value="Telangan">Vija</option>
<option value="america">KRK</option>
<option value="america">MRK</option>
</select>
How to change state based on country. and afterthat change city based on state.
Thanks in advance.
Just i want look like this below link.
http://demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php/
What you need is easy to make, you only have to play with Ajax and onChange event in yours dropdowns:
<select id="idCountries" onchange="updateStatesByCountry()">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select id="idStates" onchange="updateCitiesByState()">
<option value="">Select State</option>
<option value="india">Orissa</option>
<option value="india">Telangan</option>
<option value="america">USA</option>
<option value="america">California</option>
</select>
...
In your JS code add the needed functions:
function updateStatesByCountry(){
console.log($('#idCountries').val());
//Here add Ajax logic to load a new dropdown with all states of the current country
//Your AJAX call should be something like this
$.get('/getStatesByCountry?country='+ $('#idCountries option:selected').val(), function(data){
$('#idStates').empty();
$('#idStates').append(data);
});
});
}
//Same logic for the next dropdowns.
And I highly recommend you read about AJAX before you write this code.

Changing window URL with drop down?

<form name="roomForm">
<select name="roomMenu"
onChange="window.location = this.roomForm.roomMenu.options[this.roomForm.roomMenu.selectedIndex].value">
<option value="">Choose ICU</option>
<option value="All">All</option>
<option value="/base/ICU5/example">ICU5</option>
<option value="/base/ICU6/example">ICU6</option>
<option value="/base/ICU7/example">ICU7</option>
</select>
</form>
Could someone point out why this piece of code is not working? It should redirect to another page when the drop down menu is changed.
Your code has extra ")" and this itself is select box. jsfiddle
<form name="roomForm">
<select name="roomMenu"
onChange="window.location = this.options[this.selectedIndex].value;">
<option value="">Choose ICU</option>
<option value="All">All</option>
<option value="/base/ICU5/example">ICU5</option>
<option value="/base/ICU6/example">ICU6</option>
<option value="/base/ICU7/example">ICU7</option>
</select>
</form>​

Categories