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
How to Refresh Form Page After Post Request
Pause/Stop Videos into Tabs When I Clicked on a Tab
Dynamically Add Variable Name Value Pairs to Json Object
What Does This Format Means T00:00:00.000Z
Get Directory of a File Name in JavaScript
How to Make One Observable Sequence Wait for Another to Complete Before Emitting
Stretch Height to Fit Content in React Native
Save State When Refresh Page - Reactjs
Scroll to Element from Typescript Code (Angular 5)
Websocket Connection Failed: Error During Websocket Handshake: Unexpected Response Code: 400
How to Find Matching Values in Two Arrays
Set State Twice in a Single Function - Reactjs
Javascript Return True or Return False When and How to Use It
How to Import the Following Function in Another File
Development Server of Create-React-App Does Not Auto Refresh
How to Remove Forward and Backward Slashes from String in JavaScript