Show/Hide Select Options Based on Value of Another Select Using Javascript/Jquery

HTML/JS Hiding Select options based on another selected value

Add id or name or class attribute to your optgroup

<optgroup label="OMG-Accounting" name="test54" id="test54">OMG-Accounting>
<option value="AccountingAP">AP</option>
<option value="AccountingAR">AR</option>
<option value="AccountingGL">GL</option>
</optgroup>

JS :

function divisionSelectHandler(select){

if(select.value == 'Glendale'){
var ele = document.getElementById('test54')
ele.style.display = 'none'
}
}

OR
change html like this one.Assign unique lable to each optgroup
e.g. omgaccounting

<optgroup label="omgaccounting">OMG-Accounting>
<option value="AccountingAP">AP</option>
<option value="AccountingAR">AR</option>
<option value="AccountingGL">GL</option>
</optgroup>

JS :

var arrEle = document.querySelectorAll('optgroup[label="omgaccounting"]');;

arrEle[0].style.display = 'none'

You can hide multiple optgroup in this way using class,label or name

How to show/hide select when another select is selected

if i understand very well your situation , this piece of code might help you more !!
//by default the .subkategori-buku-umum and the select.kategori-buku they will be hidden so in the css you can make just

.kategori-buku , .subkategori-buku-umum{display : none}

and now you will inject some JS code to animate things here is my approach :

$('select.kategori-buku').change(function(){
var val = $(this).val();
if(val === "buku_pelajaran"){
$('.subkategori-buku-pelajaran').show();
$('.subkategori-buku-umum').hide();
}else if(val === "buku_umum"){
$('.subkategori-buku-pelajaran').hide();
$('.subkategori-buku-umum').show();
}
});

i hope it helped a little bit .

How to hide\show specific value of option based on another selected option by JQuery?

You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,

Please have a look on the code below:

$(function() {

$('#id_num').on('change', function(e) {
if ($(this).val() == 1) {
var arr = ['car', 'bike']; $('#id_choices option').each(function(i) { if ($.inArray($(this).attr('value'), arr) == -1) { $(this).css('display', 'none'); } else { $(this).css('display', 'inline-block'); } }); } else if ($(this).val() == 2) {
var arr = ['house', 'money']; $('#id_choices option').each(function(i) { if ($.inArray($(this).attr('value'), arr) == -1) { $(this).css('display', 'none'); } else { $(this).css('display', 'inline-block'); } }); } else if ($(this).val() == 3) {
var arr = ['plane', 'wife']; $('#id_choices option').each(function(i) { if ($.inArray($(this).attr('value'), arr) == -1) { $(this).css('display', 'none'); } else { $(this).css('display', 'inline-block'); } }); } else {
$('#id_choices option').each(function(i) { $(this).css('display', 'inline-block'); });
}
})

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>Num:</label><select id="id_num">    <option disabled selected>Select</option>    <option value='1'>1</option>    <option value='2'>2</option>    <option value='3'>3</option>    <option value=''>all</option></select><label>Choices:</label><select id="id_choices">    <option value='car'>car</option>    <option value='bike'>bike</option>    <option value='house' >house</option>    <option value='money' >money</option>    <option value='plane' >plane</option>    <option value='wife' >wife</option></select>

Show hidden drop down based on selected option in another drop down with jQuery

You can use this siple javascript code for that.
No need to go for jQuery here.
just give a id to hidden div so we can access it.

        document.getElementById('Menu1').onchange = e => {
let hiddenElement = document.getElementById('hiddenDiv')
e.target.value == 'Yes' ?
hiddenElement.style.visibility = 'visible' :
hiddenElement.style.visibility = 'hidden'
}
    <div class="form-group col-md-4">
<label for="inputEmail4">Menu1</label>
<select class="form-control" name="name" id="Menu1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
**<div class="form-group col-md-4" id='hiddenDiv' style="visibility: hidden;">**
<label for="inputPassword4">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</div>

Hide/Show <option> in select element when another option in another select is selected

You can use document.querySelectorAll('#blockSelector option[name]').. to add hidden class to all your options and then remove hidden class from options where name="yourfirstselectvalue" .

Demo Code :

function filterBlocksByAddress(addressText) {
console.log(addressText)
//hide all options.
document.querySelectorAll('#blockSelector option[name]').forEach(function(el) {
el.classList.add("hidden")
});
//if not first one slected
if (addressText != "Choose an Address") {
//loop through options where values matches..
document.querySelectorAll('#blockSelector option[name=' + addressText + ']').forEach(function(el) {
el.classList.remove("hidden"); //remove class
})
}
document.getElementById('blockSelector').selectedIndex = 0 //set first vlau slected

}
.hidden {
display: none
}
<select id="addressSelector" onchange="filterBlocksByAddress(this.options[this.selectedIndex].text)">
<option value="">Choose an Address</option>
<option>A</option>
<option>B</option>
</select>
<select id="blockSelector">
<option value="">Choose a Block</option>
<option class="hidden" name="A">
A1
</option>
<option class="hidden" name="A">
A2
</option>
<option class="hidden" name="B">
B1
</option>
<option class="hidden" name="B">
B2
</option>

</select>

Hide select options based on previous selections

you just need to add change function to your drop-down and according to your requirement you need to add your logic. see below example.

$(document).ready(function(){   $("#age").change(function(){ hideOption();      })   $("#subject").change(function(){   hideOption();   })})function hideOption(){  var age=$("#age").val();   var subject=$("#subject").val();   if(age==8 && subject=="Maths"){    $("#location [value='Location Two']").hide();   }   else{    $("#location [value='Location Two']").show();   }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><select name="age" id='age'><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option></select>
<select name="subject" id='subject'><option value="English">English</option><option value="Maths">Maths</option><option value="Science">Science</option></select>
<select name="Location" id='location'><option value="Location One">Location One</option><option value="Location Two">Location Two</option><option value="Location Three">Location Three</option></select>

Hiding options from select element, when selected in another select element

This should give you what you need, it will not allow the same option to be selected in more than one dropdown simultaneously:

var $drops = $('.drop');
$drops.change(function () { $drops.find("option").show(); $drops.each(function(index, el) { var val = $(el).val(); if (val) { var $other = $drops.not(this); $other.find("option[value=" + $(el).val() + "]").hide(); } });});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select name="dropdown1" class="drop">  <option></option>  <option value="1">Test 1</option>  <option value="2">Test 2</option>  <option value="3">Test 3</option>  <option value="4">Test 4</option></select>
<select name="dropdown2" class="drop"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> <option value="4">Test 4</option></select>
<select name="dropdown3" class="drop"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> <option value="4">Test 4</option></select>
<select name="dropdown4" class="drop"> <option></option> <option value="1">Test 1</option> <option value="2">Test 2</option> <option value="3">Test 3</option> <option value="4">Test 4</option></select>

jQuery show/hide options from one select drop down, when option on other select dropdown is slected

Try -

$("#column_select").change(function () {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})

If you were going to use this solution you'd need to hide all of the elements apart from the one with the 'none' value in your document.ready function -

$(document).ready(function() {
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
})

Demo - http://jsfiddle.net/Mxkfr/2

EDIT

I might have got a bit carried away with this, but here's a further example that uses a cache of the original select list options to ensure that the 'layout_select' list is completely reset/cleared (including the 'none' option) after the 'column_select' list is changed -

$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})

$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}).change();
})

Demo - http://jsfiddle.net/N7Xpb/1/

Hide option based on selected previous form in jquery

Please check my solution,

$(document).ready(function() {var selectList = document.createElement("select");    selectList.setAttribute("id", "bagian");    selectList.setAttribute("name", "bagian");    selectList.setAttribute("class", "form-control");    var myDiv = document.getElementById("select_bagian");    myDiv.appendChild(selectList);  $('#status').on("change", function() {    $("#row_bagian").show();    
//create array of each status var magang = ["A", "B", "C"]; var kontrak = ["D", "E", "F"]; var pertamina = ["G", "H", "I"];

if ($(this).val() === "Karyawan Magang") { for (var i = 0; i < magang.length; i++) { var option = document.createElement("option"); option.setAttribute("value", magang[i]); option.setAttribute("id", "option_magang"); option.text = magang[i]; $("#bagian option[id='option_kontrak']").remove(); $("#bagian option[id='option_pertamina']").remove(); selectList.appendChild(option); } } else if ($(this).val() === "Karyawan Kontrak") { for (var k = 0; k < kontrak.length; k++) { var option = document.createElement("option"); option.setAttribute("value", kontrak[k]); option.setAttribute("id", "option_kontrak"); option.text = kontrak[k]; $("#bagian option[id='option_magang']").remove(); $("#bagian option[id='option_pertamina']").remove(); selectList.appendChild(option);
} } else if ($(this).val() === "Karyawan Pertamina") { for (var j = 0; j < pertamina.length; j++) { var option = document.createElement("option"); option.setAttribute("value", pertamina[j]); option.setAttribute("id", "option_pertamina"); option.text = pertamina[j]; $("#bagian option[id='option_kontrak']").remove(); $("#bagian option[id='option_magang']").remove(); selectList.appendChild(option); } } });});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="row">  <label class="col-md-3" style="margin-top:30px; margin-left: 30px; color: #0b0b0b">Status</label>  <div class="col-md-6">    <select id="status" name="status" class="form-control">      <option value="">Pilih Status</option>      <option value="Karyawan Kontrak">Karyawan Kontrak</option>      <option value="Karyawan Magang">Karyawan Magang</option>      <option value="Karyawan Pertamina">Karyawan Pertamina</option>    </select>  </div></div><div class="row" id="row_bagian" style="display: none">  <label class="col-md-3" style="margin-top:30px; margin-left: 30px; color: #0b0b0b">Fungsi / Bagian</label>  <div class="col-md-6" id="select_bagian">
</div></div>


Related Topics



Leave a reply



Submit