Develop Reference

Filter <SELECT> options based on value

I have 2 input selects
Country and Cars
This is the structure: [https://jsfiddle.net/CornerStone20/r1eanhwv/6/][1]
JSFIDDLE: [1]: https://jsfiddle.net/CornerStone20/r1eanhwv/6/
When I select Country, How do I only show the selected country's cars?
I have tried:
$(function() {
$('#Country_Select').on('change', function() {
var val = this.value;
$('#Cars_Select option').hide().filter(function() {
return this.value.indexOf( val + '_' ) === 0;
})
.show();
})
.change();
});

You can use each loop to iterate through options and check if the value of car select- box is same as country select-box depending upon this show() or hide() options .
Demo Code :
$(function() {
$('#Country_Select').on('change', function() {
var val = this.value;
$('#Cars_Select option').each(function() {
//checking value of opton in cars selct is same
if ($(this).val() == val) {
$(this).show(); //show it
} else {
$(this).hide(); //hide other
}
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// Country select
<select id="Country_Select" class="form-control">
<option selected="true" disabled="false">Choose Country</option>
<option value="0001">France</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">Germany</option>
<option value="4dda2683-83c6-48c8-af9b-0a96991b7c8b">New Zealand</option>
</select>
// Cars
<select id="Cars_Select" class="form-control">
<option selected="true" disabled="false">Choose Cars</option>
<option value="0001">Renauld</option>
<option value="0001">Mini</option>
<option value="0001">Paris</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">BMW</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">Audi</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">Mercedes</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">Benz</option>
<option value="4dda2683-83c6-48c8-af9b-0a96991b7c8b">Kiwi Auto</option>
</select>

Even though the question has been answered, I am writing a better approach here:
$('#Country_Select').on('change', function(e) {
let cars = $('#Cars_Select').children();
cars.hide();
let country = $(this).val();
cars.filter('[value=' + country + ']').add(cars.eq(0)).show();
});

How do I make 2 select boxes to dismiss each other if they mach and automatically select the second option to not match?

How do I make 2 select boxes to dismiss each other if they match, by automatically selecting the second option?
I want it instead of "alert" to have a function that automatically changes one option to the second option on one of the select option boxes when they match.
If I can keep the alert and have it automatically change that would be ideal, but I accept if the alert can not be kept.
JavaScript
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type='text/javascript'>
$(window).load(function(){
$(function () {
'use strict';
$('.OBSMatch').on('change', function (event) {
var selectedValue = $(event.currentTarget).val();
var matchedDropdowns = $('.OBSMatch').filter(function (index) {
return $(this).val() === selectedValue;
});
if (matchedDropdowns.length > 1) {
alert("OBS! You cannot use it, because it matches each other!")
}
})
})
});
</script>
HTML
<select name="LangF1" class="OBSMatch">
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>—</option>
<option value="auto">Auto Detect</option>
</select>
<select name="LangF2" class="OBSMatch">
<option value="zh-CN">Chinese (Simplified)</option>
<option value="en">English</option>
<option selected value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="" disabled>—</option>
<option value="auto">Auto Detect</option>
</select>
Update: I added this update from the complete code because the former good answer is not working correctly because of this button that does Switches the option languages.
<script language="JavaScript">
function getSelectedOption( elem ) {
return elem.options[elem.selectedIndex].value;
}
function setSelectedOption( elem, value ) {
for (let i = 0; i < elem.options.length; i++) {
elem.options[i].selected = value === elem.options[i].value;
}
}
function swapByOptionValue( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = getSelectedOption( elem1 ),
selectedOption2 = getSelectedOption( elem2 );
setSelectedOption( elem1, selectedOption2 );
setSelectedOption( elem2, selectedOption1 );
}
function swapBySelectedIndex( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = elem1.selectedIndex;
elem1.selectedIndex = elem2.selectedIndex;
elem2.selectedIndex = selectedOption1;
}
</script>
<input type="button" id="SwitchLang" onClick="swapByOptionValue('select[name=\'LangF1\']', 'select[name=\'LangF2\']');" value=" Swap ▲▼ Language ">

What you are asking for is an UI which allows the user to put the UI into an illegal state, gives an alert, and attempts to make things legal.
This really doesn't make for a great UI.
If at all possible, the user should be prevented from putting the UI into an illegal state, then there's no need for an alert and no need to correct anything. Such a strategy is eminently possible here.
The basic rules are fairly simple. On change of either select menu :
the other menu's counterpart to this menu's current selection should be disabled.
the other menu's other options should be enabled.
any initially disabled options need to be protected from becoming enabled.
var $menus = $('.OBSMatch').on('change', function(event) {
$menus.not(this).find('option').filter(function(index, opt) {
return opt.value === event.target.value;
}).prop('disabled', true) // disable the other menu's option corresponding to this menu's selection
.siblings().not('._protected').prop('disabled', false); // enable the other menu's options except any that are protected.
});
$menus.find('option').filter(function(index, opt) {
return opt.disabled;
}).addClass('_protected'); // protect any initially disabled options from being enabled
$menus.trigger('change'); // initialize everything
DEMO
"Auto Detect" may need to be handled as a special case - I'm not sure.
Alternatively, for a set of 3+ select menus ...
DEMO
Edit:
The two menu's selections can be switched as follows :
function switch_(selector) {
var $menus = $(selector);
var values = $menus.map(function() {
return this.value;
}).get().reverse(); // reverse() swaps the two values
$menus.each(function(i, menu) {
$(this).val(values[i]); // implement the switch
}).trigger('change'); // re-initialize everything
}
// call
switch_('.OBSMatch');
// so, assuming you have a #switch element :
$('#switch').on('click', function() {
switch_('.OBSMatch');
});
DEMO
The function can't be named switch, which is a javascript reserved word; therefore switch_

Are you looking for something like this?
The key here is, on change:
Get the value of target element
Get the value of the related select
If values match, change the value of target element to the next option
$(window).load(function() {
$(function() {
'use strict';
$('.OBSMatch').on('change', function(event) {
var selectedVal = $(event.currentTarget).val();
var relatedId = $(this).attr('data-related');
var $otherSelect = $('#' + relatedId);
var otherVal = $otherSelect.val();
if (selectedVal === otherVal) {
$(this).val($(this).find('option:selected').next().val());
// alert("OBS! You cannot use it, because it matches each other!");
}
})
})
});
// UPDATE: Added code from updated question to test solution along with rest of code:
function getSelectedOption( elem ) {
return elem.options[elem.selectedIndex].value;
}
function setSelectedOption( elem, value ) {
for (let i = 0; i < elem.options.length; i++) {
elem.options[i].selected = value === elem.options[i].value;
}
}
function swapByOptionValue( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = getSelectedOption( elem1 ),
selectedOption2 = getSelectedOption( elem2 );
setSelectedOption( elem1, selectedOption2 );
setSelectedOption( elem2, selectedOption1 );
}
function swapBySelectedIndex( selector1, selector2 ) {
var elem1 = document.querySelector(selector1),
elem2 = document.querySelector(selector2),
selectedOption1 = elem1.selectedIndex;
elem1.selectedIndex = elem2.selectedIndex;
elem2.selectedIndex = selectedOption1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="LangF1" class="OBSMatch" data-related="ddl2" id="ddl1">
<option value="zh-CN">Chinese (Simplified)</option>
<option selected value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option value="disabled" disabled>—</option>
<option value="auto">Auto Detect</option>
</select>
<select name="LangF2" class="OBSMatch" data-related="ddl1" id="ddl2">
<option value="zh-CN">Chinese (Simplified)</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="ru">Russian</option>
<option value="es">Spanish</option>
<option selected value="disabled" disabled>—</option>
<option value="auto">Auto Detect</option>
</select>
<!-- UPDATE: Added code from updated question to test solution along with rest of code: -->
<input type="button" id="SwitchLang" onClick="swapByOptionValue('select[name=\'LangF1\']', 'select[name=\'LangF2\']');" value=" Swap ▲▼ Language ">

How to hide dropdown element depending to another one?

I've got 2 dropdowns. One with 6 values :
Query 1
Query 2
Query 3
Query 4
ToxKeywords
Molecule
and the second with 2 values :
ToxKeywords
Molecule
I want that when we select ToxKeywords or Molecule in the first dropdown, the second dropdown should be empty.
Dropdowns :
<select class="form-control space" name="textQuery" id="textQuery">
<option selected disabled>Choose here</option>
<option value="ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22">Query 1 : Genotoxicity + Ames or Micronucleus</option>
<option value="ToxKeywords:%22systemic%20toxicity%22%20OR%20ToxKeywords:%22kidney%20toxicity%22">Query 2 : Systemic Toxicity or Kidney Toxicity</option>
<option value="ToxKeywords:%22antibacterial%20effect%22%20OR%20ToxKeywords:%22phototoxicity%22">Query 3 : Skin Sensitization + LLNA or Hript</option>
<option value="ToxKeywords:%22skin%20sensitization%22%20AND%20ToxKeywords:%22llna%22%20OR%20ToxKeywords:%22hript%22">Query 4 : Antibacterial Effect or Phototoxicity</option>
<option value="ToxKeywords:">ToxKeywords</option>
<option value="Molecules.Main_name:">Molecule</option>
</select>
<label for="textQuery2">Choose one parameter</label>
<select class="form-control space" name="textQuery2" id="textQuery2">
<option selected disabled>Choose here</option>
<option value="%20AND%20ToxKeywords:">ToxKeywords</option>
<option value="%20AND%20Molecules.Main_name:">Molecule</option>
</select>
I find this jquery code that hide only the same value wich is selected :
$(document).ready(function() {
var layout_select_html = $('#textQuery2').html(); //save original dropdown list
$("#textQuery").change(function () {
var cur_column_val = $(this).val(); //save the selected value of the first dropdown
$('#textQuery2').html(layout_select_html); //set original dropdown list back
$('#textQuery2').children('option').each(function () { //loop through options
if ($(this).val().indexOf(cur_column_val) != -1) { //do your conditional and if it should not be in the dropdown list
$(this).remove(); //remove option from list
}
});
});
})
Could someone find a way to hide both values of the second dropdown when ToxKeywords or Molecule is selected in the first one ?

$(document).ready(function() {
var layout_select_html = $('#textQuery2').html(); //save original dropdown list
$("#textQuery").change(function () {
var cur_column_val = $(this).val(); //save the selected value of the first dropdown
if($(this).val()==='ToxKeywords:' || $(this).val()==='Molecules.Main_name:') {
return $('#textQuery2').empty();
}
$('#textQuery2').html(layout_select_html); //set original dropdown list back
$('#textQuery2').children('option').each(function () { //loop through options
if ($(this).val().indexOf(cur_column_val) != -1) { //do your conditional and if it should not be in the dropdown list
$(this).remove(); //remove option from list
}
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control space" name="textQuery" id="textQuery">
<option selected disabled>Choose here</option>
<option value="ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22">Query 1 : Genotoxicity + Ames or Micronucleus</option>
<option value="ToxKeywords:%22systemic%20toxicity%22%20OR%20ToxKeywords:%22kidney%20toxicity%22">Query 2 : Systemic Toxicity or Kidney Toxicity</option>
<option value="ToxKeywords:%22antibacterial%20effect%22%20OR%20ToxKeywords:%22phototoxicity%22">Query 3 : Skin Sensitization + LLNA or Hript</option>
<option value="ToxKeywords:%22skin%20sensitization%22%20AND%20ToxKeywords:%22llna%22%20OR%20ToxKeywords:%22hript%22">Query 4 : Antibacterial Effect or Phototoxicity</option>
<option value="ToxKeywords:">ToxKeywords</option>
<option value="Molecules.Main_name:">Molecule</option>
</select>
<label for="textQuery2">Choose one parameter</label>
<select class="form-control space" name="textQuery2" id="textQuery2">
<option selected disabled>Choose here</option>
<option value="%20AND%20ToxKeywords:">ToxKeywords</option>
<option value="%20AND%20Molecules.Main_name:">Molecule</option>
</select>

Try this
$("#textQuery").change(function () {
var cur_column_val = $(this).val(); //save the selected value of the first dropdown
$('#textQuery2').html(layout_select_html); //set original dropdown list back
$('#textQuery2').children('option').each(function () { //loop through options
if ($(this).val().indexOf(cur_column_val) != -1) { //do your conditional and if it should not be in the dropdown list
$("#textQuery2 option[value='%20AND%20ToxKeywords:']").remove();
$("#textQuery2 option[value='%20AND%20Molecules.Main_name:']").remove(); //remove option from list
}
});
});
It will remove both options.
})

$("#textQuery").change(function () {
var cur_column_val = $(this).val();
if(cur_column_val=='ToxKeywords' || cur_column_val=='Molecule'){
$('option[value=textQuery2]', $('#textQuery2')).remove();
$('option[value=Molecule]', $('#textQuery2')).remove();
}
});
doen't work like this? let me know :)

Converting a JavaScript function to jQuery - Select option list

This is literally the first time I've worked with jQuery and I've read the entire chapter in my textbook but am finding a hard time wrapping my head around it. I'm attempting to convert a JavaScript function (a simple option selection drop-down list) to jQuery. I've attempted a few lines of code that I've gotten from the book or from w3schools and api.query but to no avail. I'll try to make this quick and simple, I just cannot understand jQuery for some reason.
What I've attempted usually doesn't work. Before my option list works fine, then I tried experimenting but I didn't get too far.
I also apolgize for the vagueness of the question, I'd appreciate any help!
Here's something I've tried:
$(document).ready( function () {
var c = ???
if ($(c...
calc.js and index.html below it
function selectedCountry() {
var c = document.getElementById("countryChooser").value;
var message;
if (c == "nothing") { //if they selected the default option, error pops up.
alert("Please select a country.");
} else if (c == "usa") {
message = "United States of America";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else if (c == "canada") {
message = "Canada";
document.getElementById("count").innerHTML = "Your country is: " + message;
} else {
message = "Mexico";
document.getElementById("count").innerHTML = "Your country is: " + message;
}
}
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser" onchange="selectedCountry()">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Through jQuery you can do it like below:-
Example:-
$(document).ready(function(){
$('#countryChooser').change(function(){ // on change of select
if($(this).val()!=='nothing'){ // if selected value is some country
$('#count').html("Your country is: "+$("#countryChooser option:selected").text()); // get country name and add it to paragraph
}else{
$('#count').html("");
alert('Please select a country.'); // alert for selecting a country
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

Get an element by id:
var c = $('#countryChooser');
Get the value of this input/select element
var value = c.val();
Set the html of an element using the element id
$('#count').html('some html');
or set the text (html is not parsed this way)
$('#count').text('some html');
You can also handle the events with jQuery
$(document).ready(function() {
$('#countryChooser').on('change', function(event) {
// this is the DOM element with the id 'countryChooser'
// same as the native: var val = this.value;
var val = $(this).val();
// ...
});
});

I have bind the onchange() event of your select list inside the jQuery(document).ready() method. check this out-
// Updated code--
$(document).ready(function (){
$('#countryChooser').on('change' ,function () {
if(this.selectedIndex){
$('#count').html("Your country is: "+ this.options[this.selectedIndex].text);
}else{
$('#count').html("");
alert("Please select a country.");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "calc.js"></script> <!--JavaSript link -->
<select name="countrylist" id="countryChooser">
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>

$('#countryChooser').change(function(){
var selectedCountry = $(this).val();
if(selectedCountry == 'nothing'){
console.log('Select A country');
}
else{
$('#count').html('Your country is '+$('#countryChooser option:selected').text());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--JavaSript link -->
<select name="countrylist" id="countryChooser" >
<option value="nothing">Select a country</option>
<option value="usa">United States of America</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<p id="count"></p>
Please check the code might help you out
thanks

Event listener inside a function

I have a select on my page:
<select id='cat'>
<option value='a'>A</option>
<option value='b'>B</option>
<option value='all'>all</option>
</select>
With a javascript function that handles which options have to be displayed:
function funcName(aList) {
// populates the options for the select tag
$("#cat").on("change", function(){
// some computation;
});
// uses aList to update some div data
}
What I'm trying to do is if the selected option is all, I have to display everything in aList, otherwise based on the selected option I have to display only the related options. Is my usage of onchange event correct?
Initially I thought of making aList global, but after some reading on globals in JS, I got to know it is not a very good practice.
Thanks in advance!
UPDATE: aList contains some string values.

$(function () {
$("#ddl").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
var assignedRoleId = new Array();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
if(selectedValue== "all")
{
$("#ddl option").each(function()
{
if(this.value=="all")
{
assignedRoleId.push();
}
else
{
assignedRoleId.push(this.value);
assignedRoleId.push(" ");
$("#selected").html(assignedRoleId);
}
});
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Select something:
<select id="ddl">
<option value="">select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="all">all</option>
</select>
<div id="selected">
</div>