We Keep Coding

Show dropdown value based on previous selection

Is it possible for me to only display the related data on my second dropdown option when I click it on my first dropdown? I saw a similar question on stackoverflow, but I can't get it to work. The link is available here. It works when I copy and paste the code from the solution into my system. However, when I tried it on my code, it did not work.
Here's the flow:
If DEPARTMENT is equals to Grade School then Grade & Section, dropdown will only show the Kindergarten to Grade 6 and then if DEPARTMENT is equals to Junior High School, dropdown will only shows Grade 7 to Grade 10 while if DEPARTMENT is equals to Senior High School, dropdown will only shows Grade 11 to Grade 12.
User interface:
Here's the code that I'm using..
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Department</label>
<div class="position-relative">
<div class="input-group mb-3" id="dept">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select category" id="dept" name="dept" required>
<option value="" disabled selected>Choose...</option>
<option value="GS">Grade School</option>
<option value="JHS">Junior High School</option>
<option value="SHS">Senior High School</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Grade & Section (for students only)</label>
<div class="position-relative">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select operator" id="u_grdsec" name="u_grdsec">
<option value="" disabled selected>Choose...</option>
<option value="Grade 1" class="GS">Grade 1</option>
<option value="Grade 2" class="GS">Grade 2</option>
<option value="Grade 7" class="JHS">Grade 7</option>
<option value="Grade 8" class="JHS">Grade 8</option>
<option value="Grade 11" class="SHS">Grade 11</option>
<option value="Grade 12" class="SHS">Grade 12</option>
</select>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).on('change', '.category', function () {
var val = $(this).val().toLowerCase();
$('.operator option').hide();
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
</script>
Here's the screenshot of my database.

A quick fix to a minor problem
The problem is a very minor one that is difficult to spot, but very easily fixed.
The department field values in your database are uppercase, but the script tries to match to lowercase. So there is never a match and script hides all of your grade options.
To fix this problem, change the following line of code as shown:
var val = $(this).val().toLowerCase(); // incorrect
change that to:
var val = $(this).val().toUpperCase(); // correct
Yes, it is that simple! You were very close, but just needed a little help spotting the bug. ;)
You can run the snippet below to see your code working.
Addendum:
There's one other (optional) change you might want to make. Append a "removeAttr" to the following line. This will clear the previous selection when a different department is selected.
$('.operator option').hide().removeAttr("selected");
$(document).ready(function () {
$(document).on('change', '.category', function () {
// var val = $(this).val().toLowerCase(); // <----- HERE IS THE PROBLEM
var val = $(this).val().toUpperCase();
$('.operator option').hide().removeAttr("selected");
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Department</label>
<div class="position-relative">
<div class="input-group mb-3" id="dept">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select category" id="dept" name="dept" required>
<option value="" disabled selected>Choose...</option>
<option value="GS">Grade School</option>
<option value="JHS">Junior High School</option>
<option value="SHS">Senior High School</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group has-icon-left">
<label for="first-name-icon">Grade & Section (for students only)</label>
<div class="position-relative">
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
<select class="form-select operator" id="u_grdsec" name="u_grdsec">
<option value="" disabled selected>Choose...</option>
<option class="GS">Kindergarten</option>
<option class="GS">Grade 1</option>
<option class="GS">Grade 2</option>
<option class="GS">Grade 3</option>
<option class="GS">Grade 4</option>
<option class="GS">Grade 5</option>
<option class="GS">Grade 6</option>
<option class="JHS">Grade 7</option>
<option class="JHS">Grade 8</option>
<option class="JHS">Grade 9</option>
<option class="JHS">Grade 10</option>
<option class="SHS">Grade 11</option>
<option class="SHS">Grade 12</option>
<!-- PHP and DB disabled for this example
<?php
$conn = OpenCon();
$sql = "SELECT * FROM `grdlvl`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
?>
<option value="<?php echo $row['g_grdsec']; ?>" class="<?php echo $row['g_dept']; ?>"><?php echo $row['g_grdsec']; ?></option>
<?php
}
}
?>
-->
</select>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I went through the previous question you had and decided to simply use the example that was created in that question - but inside a codepen that works.
https://codepen.io/Stoffe91/pen/YzYpwNO
HTML below:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<select class="category">
<option val="price">Price</option>
<option val="weight">weight</option>
<option val="size">Size</option>
<option val="dimension">Dimension</option>
</select>
<select class="operator">
<option val="1" class="price">For Price 1</option>
<option val="2" class="price">For Price 2</option>
<option val="3" class="price">For Price 3</option>
<option val="4" class="price">For Price 4</option>
<option val="1" class="weight">For Weight 1</option>
<option val="2" class="weight">For Weight 2</option>
<option val="3" class="weight">For Weight 3</option>
<option val="4" class="weight">For Weight 4</option>
<option val="1" class="size">For Size 1</option>
<option val="2" class="size">For Size 2</option>
<option val="3" class="size">For Size 3</option>
<option val="4" class="size">For Size 4</option>
<option val="1" class="dimension">For Dimension 1</option>
<option val="2" class="dimension">For Dimension 2</option>
<option val="3" class="dimension">For Dimension 3</option>
<option val="4" class="dimension">For Dimension 4</option>
</select>
Jquery below:
$(document).ready(function () {
$(document).on('change', '.category', function () {
console.log('now');
var val = $(this).val().toLowerCase();
$('.operator option').hide();
$('.operator option.'+val).show();
$('.operator option.'+val+':first').attr('selected','selected').change();
});
});
Check this one out.
If you're having issues with it, please specify what part of it you're having issues with. Simply apply this on your current project.

Add third list on dependent dropdown list JS

I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>

I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/

Using jquery find() to select a dropdown deselects other dropdowns

I am attempting to select a dropdown option (out of several dropdowns on the page) by its value. I'm posting below code I think is relevant but if more is needed please let me know!
HTML
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</fieldset>
</form>
jQuery
var example = ".option3";
var example = ".option3";
$('#Filters').find('.dropdowns').val(example).click();
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
enter code here $('#Filters').find('.dropdowns').val(example).click();
This works, selects the correct dropdown option and the dropdown initiates the filtering process (I'm using MixItUp), but it deselects all other dropdowns making them blank instead of their default values, which should be (in this example) Default 1, Default 2, Default 3, etc. (except of course the dropdown that contains the correct value).
I'm hoping to have jQuery code find the dropdown option with the correct value (example = ".option3") but not affect the other dropdowns and make sure they're still on their default initial values.
I haven't been able to find answers to my problem anywhere so any help would be appreciated!

If I got your point you can use .find('option[value="'+example+'"]').prop('selected', true);
Demo
var example = ".option3";
$('#Filters').find('option[value="'+example+'"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</fieldset>
</form>

find does not deselect your selects. val does.
What happens is, $('#Filters') finds the form object. Then .find('.dropdowns') finds all the select objects within it. Then .val(example) sets the value of all of those select objects to .option3. However, that value happens to be invalid for most of them.
What I assume you want is to find only the select objects that actually can take your value, and set the value for those only:
var example = ".option3";
$('#Filters').find('.dropdowns:has(option[value="' + example + '"])').val(example);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>
(Hopefully your option values won't have crazy things like quotes inside them.)

Please find below solution, I hope this will help you.
var example = ".option3";
$('#Filters').find('.dropdowns').val(example).prop('selected',true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="controls" id="Filters">
<fieldset>
<select id="select1" class="dropdowns">
<option selected="selected" value=".default1">Default 1</option>
<option value=".option1">Option 1</option>
<option value=".option2">Option 2</option>
</select>
</fieldset>
<fieldset>
<select id="select2" class="dropdowns">
<option selected="selected" value=".default2">Default 2</option>
<option value=".option3">Option 3</option>
<option value=".option4">Option 4</option>
</select>
</fieldset>
<fieldset>
<select id="select3" class="dropdowns">
<option selected="selected" value=".default3">Default 3</option>
<option value=".option5">Option 5</option>
<option value=".option6">Option 6</option>
</select>
</fieldset>
</form>

You need to be more specific when selecting your dropdown.
Use the dropdown ID to select it, then choose a value using val(), then trigger a click event, ei.:
var example = ".option3"; $('#Filters').find('.dropdowns #select2 ').val(example).click();
Otherwise you're assigning the value "option3" for all three dropdowns, which is why #select1 and #select3 look empty.

Drop-Down List using Javascript HTML and jQuery

I'm trying to create a function in javascript that will see what day it is and depending on a day have a certain drop box list appear. However, for some reason it won't work and I'm not sure where the syntax error is in my code.
HTML:
<html>
<head></head>
<body>
<div class="Questions">
<div id="myAnswers" style="display : none">>
<div id="A">
<p><strong>Where are you Studying</strong></p>
<select>
<option value disabled selected>Choose Location</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
<option value="1">Answer 5</option>
<option value="1">Answer 6</option>
</select>
</div>
<div id="B" style="display : none">
<select>
<option value disabled selected>Choose Answer</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
</select>
</div>
</div>
</div>
</body>
</html>
Javascript:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var day= new Date();
var weekday= day.getDay();
$("#A","#B").hide();
function showAnswer(){
if(weekday==3 || weekday==4){
$("#B").show();
}else{
$("#A").show();
}
}
window.onload=showAnswer;
</script>

A few issues to fix before your code can work:
As noted by #junkfoodjunkie you do not need the style="display:none;"
Use new Date(), not new Day()
Use $("#A,#B").hide(), not $("#A","#B")
Feel free to liberally use jQuery since ... :)
$(function() {
var day= new Date();
var weekday= day.getDay();
$("#A,#B").hide();
function showAnswer(weekday) {
if(weekday==3 || weekday==4) {
$("#B").show();
} else {
$("#A").show();
}
}
showAnswer( weekday );
console.log( weekday );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Questions">
<div id="myAnswers">
<div id="A">
<p><strong>Where are you Studying</strong></p>
<select>
<option value disabled selected>Choose Location</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
<option value="1">Answer 5</option>
<option value="1">Answer 6</option>
</select>
</div>
<div id="B">
<select>
<option value disabled selected>Choose Answer</option>
<option value="1">Answer 1</option>
<option value="1">Answer 2</option>
<option value="1">Answer 3</option>
<option value="1">Answer 4</option>
</select>
</div>
</div>
</div>

jQuery if Form with Selects are Filled out, show div

I am look for a way to make it so that when the user selects an item form all the select (for which the value of the option is not nil) the div with id "js-market" is shown.
This is my html code:
<form class="js-chose">
<div class="col-md-6 col-xm-12">
<div class="form-group js-select">
<label>Select a Market</label>
<select class="form-control">
<option value='' disabled selected>Chose a Market</option>
<%Item.all.each do |item|%>
<option value="<%=item.id%>"><%=item.name.capitalize%></option>
<%end%>
</select>
</div>
</div>
<div class="col-md-6 col-xm-12">
<div class="form-group">
<label>Enter Market with:</label>
<select class="form-control js-select">
<option value='' disabled selected>Chose a Company</option>
<%Company.where(user_id: current_user.id).each do |company|%>
<option value="<%=company.id%>"><%=company.name%></option>
<%end%>
</select>
</div>
</div>
</form>
In short I need to make jQuery show the div with id="js-market" when both selects have been filled by the user and get the values of the selected items and assign them to a variable.
Thank you. Please let me know if I wasn't clear enough.

Example that works with multiple select elements
Link to jsfiddle
var counter = $('.select').length;
$('.select').change(function() {
$.each($('.select'),function(i,e) {
var t = $(this);
if (t.val() == undefined || t.val() == '') {
$('#js-market').fadeOut();
return;
}
if (i+1 == counter) {
$('#js-market').fadeIn();
}
});
});
#js-market {
display: none;
}
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<select class="select">
<option value="">No Value</option>
<option value="value1">Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
<option value="value1">Value 4</option>
</select>
<div id="js-market">Lorem ipsum</div>

See this fiddle
You can do this by onchange() event in javascript. In the fiddle specified above, what I do is that, I've placed 2 select boxes and a div with id demo will be shown only if two of the select boxes are selected.
HTML
<select id="mySelect1" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="mySelect2" onchange="myFunction()">
<option value="0">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div id="demo"></div>
JS
function myFunction() {
if (document.getElementById("mySelect1").value > 0 && document.getElementById("mySelect2").value > 0) {
document.getElementById("demo").style.display = "block";
} else document.getElementById("demo").style.display = "none";
}