Working on a site and I want to show/hide the values of a second based on the choices of the first .
I tried to play with Javascript, but I'm not good at it to be honest.
<select id="job_type">
<option value="1"><option> 1</option>
<option value="2"><option> 1</option>
<option value="3"><option> 1</option>
<option value="4"><option> 1</option>
</select>
<select id="function">
<option value="a" class="case_a"><option> show only when job_type = 4</option>
<option value="b" class="case_a"><option> show only when job_type = 4</option>
<option value="c" class="case_b"><option> show only when job_type =/= 4</option>
<option value="d" class="case_b"><option> show only when job_type =/= 4</option>
</select>
<script>
$(document).ready(function(){
$('#job_type').on('change', function() {
if ( this.value == '4') {
$(".case_a").show();
$(".case_b").hide();
} else {
$(".case_a").hide();
$(".case_b").show();
}
});
});
</script>
There are a few minor issues with your code. Please try the snippet below. There also were some extra tags
$(document).ready(function(){
$('#job_type').on('change', function() {
if ( $(this).val() === '4')
{
$(".case_a").show();
$(".case_b").hide();
}
else
{
$(".case_a").hide();
$(".case_b").show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="job_type">
<option value="1">1</option>
<option value="2">1</option>
<option value="3">1</option>
<option value="4">1</option>
</select>
<select id="function">
<option value="a" class="case_a"> show only when job_type = 4</option>
<option value="b" class="case_a"> show only when job_type = 4</option>
<option value="c" class="case_b"> show only when job_type =/= 4</option>
<option value="d" class="case_b">show only when job_type =/= 4</option>
</select>
<html>
<body>
<select id="job_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="function">
<option value="a" class="case_a">show only when job_type = 4</option>
<option value="b" class="case_b">show only when job_type = 4</option>
<option value="c" class="case_c"> show only when job_type =/= 4</option>
<option value="d" class="case_d">show only when job_type =/= 4</option>
</select>
<body>
<html>
And for JS:
map = {
"1": ["a", "b"],
'2': ["c"],
"3": ["a", "d"],
"4": ["b", "c"]
}
$(document).ready(function(){
$('#job_type').on('change', function() {
option = this.value
$("#function > option").each(function() {
if(map[option].includes(this.value)){
$('.' + this.className ).show();
}else{
$('.' + this.className ).hide();
}
});
});
})
The map objects maps the values from the first select to the second select, so you can alter the map object to fit your needs.
Your HTML is incorrect
<select id="job_type">
<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>
<select id="function">
<option value="a" class="case_a">show only when job_type = 4</option>
<option value="b" class="case_a">show only when job_type = 4</option>
<option value="c" class="case_b">show only when job_type =/= 4</option>
<option value="d" class="case_b">show only when job_type =/= 4</option>
</select>
Javascript
$(document).on('change', '#job_type', function(){
var val = this.value;
var groupA = $(document).find('#function option[class$=_a]');
var groupB = $(document).find('#function option[class$=_b]');
if(val == 4){
groupA.show()
groupB.hide()
}else{
groupA.hide()
groupB.show()
}
})
Related
I have a form, and I'm trying to disable or hide options in a select form element which have a particular data-id attribute. Example form:
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
I would like to hide (and disable for browsers which don't support hiding) the options with data-id of "notAvailable".
Here is what I've tried:
<script>
$(document).ready(function () {
//hide unavailable options
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
</script>
My selector seems to fail, because when I the below code to log the result, I get "notAvailable : undefined" 127 times (one for each option in my form)
<script>
$(document).ready(function () {
//test by logging
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
var loggedID = $(this).attr("data-id");
console.log(unavailable + " : " + loggedID);
}
});
});
</script>
Thank you for your help!
Try following code:
$("#fuu select option[data-id='notAvailable']").hide().prop('disabled', true);
Try This :
$(document).ready(function(){
$('select option').each(function(){
if($(this).attr('data-id')=='notAvailable'){
$(this).prop('disabled',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
<select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
Provide this under quotes var unavailable = "notAvailable";
Change the condition as $(this).attr("data-id") == unavailable
Example:
$(document).ready(function() {
//hide unavailable options
var unavailable = "notAvailable";
$('#fuu select option').each(function(event) {
if ($(this).attr("data-id") == unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
Need to disable option "5" & "6" when the option value "2" is selected. It should display all the options in the List_2 when option "1" is selected. How can I do that using jQuery or any other method.
if ($('option[value=2]').prop('selected', true)) {
$('option[value=5]').prop('disabled', true);
}
<HTML>
<body>
<select id= "List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id= "List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</HTML>
Here you go with a solution https://jsfiddle.net/eurbvzk1/
var disabledDic = {
"1" : ["6"],
"2" : ["4", "5"],
"3" : []
}
$('select#list_1').on('change', function(){
$('select#list_2 option').each(function(){
$(this).removeAttr('disabled');
});
var disableOption = disabledDic[$(this).val()];
$.each( disableOption, function(i){
$('option[value="' + disableOption[i] + '"]').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 2</option>
</select>
<select id= "list_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Create a dictionary that will contain each first select option as key & value will be list of disabled options from second list.
Onchange method check the dictionary & loop through the disabled value.
Hope this will help you.
With plain JS:
document.getElementById('List_1').onchange = function() {
document.getElementById('List_2')[1].disabled = (document.getElementById('List_1').selectedIndex == 1);
document.getElementById('List_2')[2].disabled = (document.getElementById('List_1').selectedIndex == 1);
}
<select id="List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
I am surrently having an issue using JQuery. I have 2 select fields.
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
And here is my JavaScript code
<script type="text/javascript">
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_"+curval).show(0);
$("#cat").change(function(){
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if($(".cat_"+cat).length == 0){$(".cat_0").show(0);}
else{$(".cat_"+cat).show(0);}
});
</script>
Here is the problem. When I change the value of the cats select, the options for the subcats are changed correctly. However, the currently selected field is still showing (Even if it doesn't correspond to the current cat).
Any help would be greatly appreciated.
You should change your code a little bit so on the hange event it can add the selected attribute to the first element in the available options :)
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_" + curval).show(0);
$("#cat").change(function() {
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if ($(".cat_" + cat).length == 0) {
$(".cat_0").attr("selected", "selected").show(0);
} else {
$(".cat_" + cat).eq(0).attr("selected", "selected");
$(".cat_" + cat).show(0);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
am trying to remove null value in listbox so first i tried with loop and then one guy helped to do this way but its not removing a null value and empty space...can some body
help out this problem by javascript..
<script type="text/javascript">
function change()
{
//document.getElementById("Geography").options[7]=new Option("", "newval", true, false);
var optionsArr = [];
optionsArr.push(document.getElementById("Geography").options);
optionsArr.push(document.getElementById("zone").options);
optionsArr.push(document.getElementById("country").options);
var optArrlenght = optionsArr.length;
for ( var j = 0; j < optArrlenght; j++){
var options = optionsArr[j];
var optionslength = options.length
for (var i = 0; i < optionslength; i++)
{
if (options[i].innerHTML == "Null Value" || options[i].innerHTML == "")
{
options.removeChild(options[i]);
// OR
// options.options[i] = null;
}
}
}
}
</script>
</head>
<body onload="change()">
Geography:<select id="Geography">
<option value="0"></option>
<option value="1">Null Value</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
zone: <select id="zone" >
<option value="0"></option>
<option value="1">Null Value</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
country:<select id="country" >
<option value="0"></option>
<option value="1">Null Value</option>
<option value="2">item 2</option>
<option value="3">item 3</option>
<option value="4">item 4</option>
<option value="0">All</option>
</select>
</body>
Hi whether u have found out solution or not still i put my answer here..
http://jsbin.com/awUWAMeN/2/edit
function change()
{
$('select').each(function() {
$(this).find('option:contains("Null Value")').remove();
});
}
This is not the proper way to remove a dom element: .removeChild() should be called on the elements parent. Instead of options.removeChild(options[i]);, try:
options[i].parentElement.removeChild(options[i]);
Also, if you want to remove the element from the array options call the following:
options.splice(i, 1);
You just need to make the following changes:
1.
<option value="0"></option>
<option value="Null Value">Null Value</option>
<option value="item 2">item 2</option>
<option value="item 3">item 3</option>
<option value="item 4">item 4</option>
<option value="All">All</option>
2.Inside Loop in function change you need to do following
if (options[i].value == "Null Value" )
{ options.removeChild(options[i]);}
if(options[i].innerHTML == "")
{ options.removeChild(options[i])}
This doesn't work in chrome and IE. I'm not so good at Javascripting so I don't know what to look for. So what can I do to make this work? I have searched here to find some solution, but no luck.
Javascript code:
function show(id) {
var element = document.getElementById(id);
element.style.display = "";
}
function hide(id) {
var element = document.getElementById(id);
element.style.display = "none";
}
function hideAll() {
hide('child1');
hide('child2');
hide('child3');
hide('child4');
hide('child5');
}
HTML code
<select name="parent" id="parent">
<option value="0" selected>Please choose</option>
<option value="1" onclick="hideAll(); show('child1');">Parent 1</option>
<option value="2" onclick="hideAll(); show('child2');">Parent 2</option>
<option value="3" onclick="hideAll(); show('child3');">Parent 3</option>
<option value="4" onclick="hideAll(); show('child4');">Parent 4</option>
<option value="5" onclick="hideAll(); show('child5');">Parent 5</option>
</select>
</p>
<select name="child1" id="child1" style="display:none">
<option value="1">Child1 - 1</option>
<option value="2">Child1 - 2</option>
<option value="3">Child1 - 3</option>
<option value="4">Child1 - 4</option>
<option value="5">Child1 - 5</option>
</select>
<select name="child2" id="child2" style="display:none">
<option value="1">Child2 - 1</option>
<option value="2">Child2 - 2</option>
<option value="3">Child2 - 3</option>
<option value="4">Child2 - 4</option>
<option value="5">Child2 - 5</option>
</select>
<select name="child3" id="child3" style="display:none">
<option value="1">Child3 - 1</option>
<option value="2">Child3 - 2</option>
<option value="3">Child3 - 3</option>
<option value="4">Child3 - 4</option>
<option value="5">Child3 - 5</option>
</select>
<select name="child4" id="child4" style="display:none">
<option value="1">Child4 - 1</option>
<option value="2">Child4 - 2</option>
<option value="3">Child4 - 3</option>
<option value="4">Child4 - 4</option>
<option value="5">Child4 - 5</option>
</select>
<select name="child5" id="child5" style="display:none">
<option value="1">Child5 - 1</option>
<option value="2">Child5 - 2</option>
<option value="3">Child5 - 3</option>
<option value="4">Child5 - 4</option>
<option value="5">Child5 - 5</option>
</select>
You need to use onchange instead of onclick
Here is a complete solution which does not care what the IDS are as long as the values of the parent select match the IDs of the selects to hide and show
demo
window.onload=function() {
document.getElementById("disc").onchange=function() {
hideAll(this);
var id = this.value;
if (id) show(id);
}
}
function show(id) {
var el = document.getElementById(id);
if (el) el.style.display = "block";
else alert("No such ID as "+id);
}
function hide(id) {
var el = document.getElementById(id);
el.style.display = "none";
}
function hideAll(sel) {
var allSels=document.getElementsByTagName("select");
for (var i=0;i<allSels.length;i++) {
if (allSels[i]!=sel) {
console.log(allSels[i].id)
allSels[i].style.display='none';
}
}
}
try this
<select name="parent" id="parent" onChange="showHide(this.id)">
function showHide(id)
{
hideAll();
var elementId = document.getElementById(id).value ;
document.getElementById("child"+elementId).style.display= "block";
}