Develop Reference

Change a select option thanks to another option

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>

javascript - Hide Options from Multiple Selection Box when an option from another select is selected

I need your help. So what I want to do is when a user select an option from one select, automatically hide an option from another multiple select.
Example:
if a user choose Car from select A, I want the car option from the select B to be automatically removed or hidden.
select A:
<select name="my_option_one" required id="id_my_option_one">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
Select B:
<select name="my_option_two" id="id_my_option_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
This is what I have tried but none of it worked.
$(document).ready(function() {
$("#id_my_option_one").change(function() {
if ($(this).val() === 'C') {
$("#id_my_option_two option[value='C']").options[0].remove();
$('select[name=my_option_two] option:eq(1)').hide();
$("#id_my_option_two option[value=" + 'C' + "]").hide();
$("#id_my_option_two option[value='C']").attr('disabled','disabled').hide();
}
});
});

function my_optionsChange() {
$("#id_my_options_two option").show(); //.css("display", "block");
$("#id_my_options_two option[value='" + $("#id_my_options").val() + "']").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="my_options" required id="id_my_options" onchange="my_optionsChange()">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>

I made an example which is longer because it's split into parts so you understand better what is going on.
I tried to name the variables so that it's clear what they are, but if you have any questions, please ask in the comments.
Let me know if this works for you.
const firstSelect = $('#id_my_options')
const secondSelect = $('#id_my_options_two')
firstSelect.on('change',function() {
const selected = $(this).find('option:selected');
const selectedValue = selected.val()
const secondOptions = secondSelect.children();
secondOptions.each(function() {
const secondValue = $(this).val()
secondValue === selectedValue ? $(this).hide() : $(this).show()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="Choose" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>

<select name="my_options" id="firstblock" onchange="disable(2,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options" id="secondblock" onchange="disable(1,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<script>
function disable(needtoblock,val){
console.log(needtoblock+" "+val);
if(val != ""){
if(needtoblock == 1){
$("#firstblock option[value='"+val+"']").prop('disabled', true);
}else if(needtoblock == 2){
$("#secondblock option[value='"+val+"']").prop('disabled', true);
}else{
}
}else{
$("#secondblock option").prop('disabled', false);
$("#firstblock option").prop('disabled', false);
}
}
</script>
This is how code could look, definetly you need to update and make it suitable for you.

I know, this is a bit late, but maybe it is of interest to someone out there. I understood the demand of OP so, that the hiding of options was to be done in any direction, or potentially spanning over multiple selector boxes. The following script will do exactly that: if you select an option in one selector it will go through the other selectors of the defined group $grp (by doing $grp.not(this).each((i,trg)=> ...)) and will hide/show all options there, depending of whether thay have been selected elsewhere already.
The $(to).toggle(...) method sets the visibility of each option (to) within trg, based on the existence of selected options with the same value in the sibling selectors of trg (again, limited to the current group $grp).
Maybe the script is a little too condensed for easy reading but it shows how much you can achieve with very little code when you use the power of jQuery.
const $grp=$('select[id^=id_my_options]') // define the selector group
$grp.on('change',function(ev){ // bind the change event ...
$grp.not(this).each((i,trg)=> // work on each sibling-selector (trg) of clicked
// selector (this), but only within jquery
// selection $grp
$('option[value!=""]',trg).each((j,to)=> // for all options of sibling-selectors of
// trg (within jquery selection $grp):
$(to).toggle($grp.not(trg).find('option[value='+to.value+']:selected').length==0))
// toggle the visibiltiy of that option
)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car2</option>
<option value="H">House2</option>
<option value="A">Airplane2</option>
</select>
<select name="my_options_three" id="id_my_options_three" multiple="multiple">
<option value="O">yet another option</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>
<br><br>
<select name="my_options_four" id="id_your_options_four" multiple="multiple">
<option value="O">and some unrelated options</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>

search for option in dropdown box

I want to find if a option is in the dropdown and use its value.
this is NOT when selected. I purely want to scan the list for Procedures and get the value from it.
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>

You can use .filter():
var value = $('#procedure-category-fld option').filter(function (idx, ele) {
return ele.textContent == "Procedure";
}).val();
console.log(value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>

You can take the option elements from within the select you have and extract their value/text using jquery:
$(function() {
$('#procedure-category-fld option').each(function(i, el) {
console.log($(el).val(), $(el).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>

Disable 3th, 4th dropdown list if 1st or 2nr are selected

I have this issue: In my form there are 4 dropdownlist and when the 1st (category1) or 2nd (software1) dropdown list is selected, the 3th (category2) and 4th (software2) must be disabled.
For this issue I find this script at disable-second-dropdown-if-the-first-is-not-selected but I do not trust to modify this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<script type="text/javascript">
var setEnabled = function(e) {
var name = this.name.replace(/1/, '2'); //get name for second drop down
$('select[name=' + name + ']')
.prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
</script>
How to modify this?
Thanks

I think the main thing you want is to flip === for !==
However, to get this working on a matrix, where both top inputs trigger enabling/disabling of both bottom inputs, you'll need to test both on change of either.
var setEnabled = function(e) {
var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0;
$('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one
if (selected) {
$('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0)
}
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>

dropdown values hide show

I have 2 dropdowns, here is the fiddle,
https://jsfiddle.net/oqsf7gjq/1/
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
When user selects "Yes" from "ddlOption" dropdown, then I want to show only 2 values (Saab and Audi) for dropdown "ddlCar" and when user selects "No", then I want to see all values for "ddlCar" dropdown.
Please suggest me any possibilities with Jquery code. Thanks!

jsFiddle example
$("#ddlOption").change(function() {
$("#ddlCar").val("").find("[value=1], [value=3]").toggle( this.value==="2" );
});
$("#ddlOption").change(function() {
$("#ddlCar").val("").find("[value=1], [value=3]").toggle( this.value==="2" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>
Toggle the desired option elements by checking Boolean the first select's value (this.value==="2")
Also, reset to .val("") in order to make sure the second select value is properly cleared from possible previous changes.

$('#ddlOption').change(function(){
var txt = $(this).val();
alert(txt);
if(txt==1){
$('#ddlCar option[value="1"]').hide();
$('#ddlCar option[value="3"]').hide();
}
else{
$('#ddlCar option[value="1"]').show();
$('#ddlCar option[value="3"]').show();
}
});
Fiddle
http://jsfiddle.net/ue4Cm/38/

Tested in Edge, Chrome, Firefox and Internet Explorer 11
Note that hiding and showing the options doesn't work in Edge or IE. The elements need to be really removed.
$(function() {
var $ddlCar = $("#ddlCar");
var $ddlCarOptions = $ddlCar.children("option");
$("#ddlOption").change(function() {
if ($(this).val() === "1") {
$ddlCarOptions.filter(".toggleable").attr("selected", false).remove();
} else {
$ddlCar.empty().append($ddlCarOptions);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/>
<br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option class="toggleable" value="1">Volvo</option>
<option value="2">Saab</option>
<option class="toggleable" value="3">Mercedes</option>
<option value="4">Audi</option>
</select>

Check updated fiddle
In your markup, you need to add classes to the dropdown values first
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2" class="yes">Saab</option>
<option value="3">Mercedes</option>
<option value="4" class="yes">Audi</option>
</select>
In your jquery code now
$(function() {
$("#ddlOption").change(function() {
var selectedValue = $(this).val();
if (selectedValue == 1)
{
$("#ddlCar option").hide();
$("#ddlCar option.yes").show();
}
else
{
$("#ddlCar option").show();
}
});
});

please check the code below I have made few changes to your code
<script type="text/javascript">
function populateList() {
if($("option:selected",$("#ddlOption")).val()=="1")
{
$(".val1").hide();
$(".val2").show();
}
else if($("option:selected",$("#ddlOption")).val()=="2")
{
$(".val1").show();
$(".val2").hide();
}
else
{
$(".val1").show();
$(".val2").show();
}
}
</script>
<select id="ddlOption" onchange="populateList();">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/><br/>
<select id="ddlCar">
<option value="">- Please select a name -</option>
<option value="1" class="val2">Volvo</option>
<option value="2" class="val1">Saab</option>
<option value="3" class="val2">Mercedes</option>
<option value="4" class="val1">Audi</option>
</select>
let me know if you have any doubts

You can write code as below which is also works for larger object value(300 or whatever size) and it is dynamic.
Here optionOne, optionTwo are object which is bind when Yes/No value selected
Updated Js fiddle link
$(function() {
var optionOne=[{text:"Saab",value:"2"},{text:"Audi",value:"4"}];
var optionTwo=[{text:"Volvo",value:"1"},{text:"Saab",value:"2"},{text:"Mercedes",value:"3"},{text:"Audi",value:"4"}];
$("#ddlOption").change(function() {
var selectedValue=$(this).val();
$('#ddlCar').html('');
var mySelect = $('#ddlCar').append($('<option></option>').val("").html("- Please select a name -"));
if(selectedValue==='1'){
$.each(optionOne, function(index, item) {
mySelect.append($('<option></option>').val(item.value).html(item.text));
});
}else if(selectedValue==='2'){
$.each(optionTwo, function(index, item) {
mySelect.append($('<option></option>').val(item.value).html(item.text));
});
}else{
//To Do if no selection
}
});
});

Try this: https://jsfiddle.net/oqsf7gjq/17/ not the cleanest solution but it will work cross browsing.
$(function() {
var carArray = [];
$('#ddlCar option').each(function() {
carArray.push($(this));
});
$("#ddlOption").change(function() {
if ($('#ddlOption').val() == 1) {
$('#ddlCar option').each(function() {
if ($(this).val() != 2 && $(this).val() != 4) {
$(this).remove();
}
})
} else {
$('#ddlCar option').each(function() {
$(this).remove();
})
for (var i in carArray) {
$('#ddlCar').append(carArray[i])
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlOption">
<option value="">- Select an option -</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<br/>
<br/>
<select id="ddlCar">
<option value="0">- Please select a name -</option>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Mercedes</option>
<option value="4">Audi</option>
</select>