We Keep Coding

Show/hide dropdown 2 or dropdown 3 based on selected option from dropdown 1

I have 3 dropdowns in a form:
<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
I need the second and third dropdown to appear/disappear based on selection of the first dropdown. 2 and 3 have to be hidden on page load, or when value 3 is selected on dropdown 1, but not just hidden from view, rather completely non-existant. I say this because jquery .show and .hide only makes an element disappear from display, it still stays inside the code and because of the "required" attribute inside those hidden dropdowns, form cannot submit.
I have tried this as well as many other answers I found, but had no luck...
<script>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').show();
$('#3').hide();
} else if ($(this).val() == '2') {
$('#3').show();
$('#2').hide();
} else {
$("#2").hide();
$('#3').hide();
}
})
</script>
Please help...
Edit:
Something along those lines:
<form id="form">
<select id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<div id="here">
<select id="2" required>
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select id="3" required>
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
</div>
</form>
$("#1").change(function () {
if ($(this).val() == '1') {
$('#2').appendTo( "#here" );
$('#3').remove();
} else if ($(this).val() == '2') {
$('#3').appendTo( "#here" );
$('#2').remove();
} else {
$('#2').remove();
$('#3').remove();
}
})
I am not very good at jquery. This does what I want, but only once. I dont know how to bring them back once removed. For example, if I selected from #1: 1(Car) and from #2: 1(Small Car), #3 will be removed. But if i now decide to choose another option on #1 nothing happens. Also, on load, all 3 are shown, I wanted to keep #2 and #3 hidden until an option on #1 is selected.

Here's one way to go about it. Instead of using numbers as ID's, why not use a data-attribute. Each time a select option is chosen the code will show the next one in the sequence.
$(document).ready(() => {
$('select[data-order=1]').show()
let selects = $('select[data-order]');
selects.change(function() {
// get number
let num = +$(this).data('order');
// show the next select and hide all selects after that
selects.each(function(i,o) {
let thisNum = +$(o).data('order');
if (thisNum === num + 1) $(o).show().val(''); // show and reset the value
else if (thisNum > num + 1) $(o).hide();
})
})
})
select[data-order] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<select data-order='1' id="1" required>
<option value="">Select type</option>
<option value="1">Car</option>
<option value="2">Truck</option>
<option value="3">Some other option</option>
</select>
<select data-order='2' id="2">
<option value="">Select option</option>
<option value="1">Small Car</option>
<option value="2">Big Car</option>
</select>
<select data-order='3' id="3">
<option value="">Select option</option>
<option value="1">Small Truck</option>
<option value="2">Big Car</option>
</select>
</form>

Select another dropdown value based on the previous dropdown selection

I am new to html javascript and trying to learn it. I am having an issue that when I select a value of a dropdown it will select another dropdown value when certain criteria matches.
If they Select the option 4 (takeout) from service_type dropdown, the counter dropdown will automatically selected the option 2 driveway. else user are free to select any value on both dropdown. Only if they select Takeout, it will make driveway selected and also make the table service option inactive.
if they select 1,2 or 3 from the Service type dropdown then option 1 will be enabled.
I need a javascript and no jquery. Please help me
<div class="form-group col-md-12">
<select name="service_type" id="service_type" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Counter</option>
<option value="1">Table Service</option>
<option value="2">Driveway</option>
</select>
</div>

You can use javascript like this:
function Checker(el){
const select = document.getElementById('counter');
removeOptions(select);
if(el.value == '4'){
var option1 = document.createElement("option");
option1.text = "Driveway";
option1.value = "2";
select.add(option1);
}else{
var option2 = document.createElement("option");
option2.text = "Table Service";
option2.value = "1";
select.add(option2);
var option1 = document.createElement("option");
option1.text = "Driveway";
option1.value = "2";
select.add(option1);
}
}
function removeOptions(selectElement) {
var i, L = selectElement.options.length - 1;
for (i = L; i >= 0; i--) {
selectElement.remove(i);
}
}
<div class="form-group col-md-12">
<select name="service_type" id="service_type" class="form-control form-control-line" onChange="Checker(this)" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service Fist</option>
</select>
</div>
Create two function one for create option base to first choise and second for remove option everytime function is called.

const firstSelect = document.querySelector('#serviceType');
const secondSelect = document.querySelector('#counter');
firstSelect.addEventListener('change', (event) => {
if (event.target.value === '4') {
secondSelect.value = '2';
secondSelect.disabled = true;
} else if (typeof event.target.value === 'string' && event.target.value.length > 0) {
secondSelect.disabled = false;
secondSelect.value = '1';
} else {
secondSelect.disabled = false;
secondSelect.value = '';
}
});
<div class="form-group col-md-12">
<select name="service_type" id="serviceType" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Service</option>
<option value="1">Dining</option>
<option value="2">Beverages</option>
<option value="3">Liquor</option>
<option value="4">Takeout</option>
</select>
</div>
<div class="form-group col-md-12">
<select name="counter" id="counter" class="form-control form-control-line" required>
<option value="" selected="selected" >Select Counter</option>
<option value="1">Table Service</option>
<option value="2">Driveway</option>
</select>
</div>
How does it work?
You need to select your Select controls from DOM and then listen to change event on first select, then you can get value from it and depending on your choice change value of Select #2. In order to disable ability to choose another option in second dropdown, you can disable it.

How to show a textbox or select/option in the page once user selects an option from the list without clicking the submit button?

I want to show another dropdown list beneath the current one once the user chooses Rank or Department. After choosing from the new list, they user can submit the form.
Similarly, if the user chooses any other option (except LastName), a textbox will appear that needs to be filled in before they can click the submit button.
<form action="viewEmployeeHTML.php" method="post">
<div class="outer-div">
<div class="inner-div">
<br><br><br>
<h2>Search By:</h2>
<select name="selectionToView" class="SelectBox">
<option value="Select">-- Select --</option>
<option value="ID">ID</option>
<option value="FirstName">First Name</option>
<option value="MiddleName">Middle Name</option>
<option value="LastName">Last Name</option>
<option value="Email">Email</option>
<option value="Phone">Phone</option>
<option value="IP_Phone">IP Phone</option>
<option value="OfficeNumber">Office Number</option>
<option value="CoordinatorName">Coordinator Name</option>
<option value="Rank">Rank</option>
<option value="Department">Department</option>
<option value="JoiningDate"> Joining Date</option>
<option value="Committee_AND_Unit">Committee/Unit</option>
</select><br><br><br>
</div>
</div>
<br><br><br>
<center><input type="submit" value="VIEW" name="view"></center>
</form>
I tried this code but it didn't work for me:
<form action="viewEmployeeHTML.php" method="post">
<div class="outer-div" >
<div class="inner-div">
<br><br><br>
<h2>Search By:</h2>
<select name="selectionToView" class="SelectBox" onchange="OnSelectionChange()">
<option value="Select">-- Select --</option>
<option value="ID">ID</option>
<option value="FirstName">First Name</option>
<option value="MiddleName">Middle Name</option>
<option value="LastName">Last Name</option>
<option value="Email">Email</option>
<option value="Phone">Phone</option>
<option value="IP_Phone">IP Phone</option>
<option value="OfficeNumber">Office Number</option>
<option value="CoordinatorName">Coordinator Name</option>
<option value="Rank">Rank</option>
<option value="Department">Department</option>
<option value="JoiningDate"> Joining Date</option>
<option value="Committee_AND_Unit">Committee/Unit</option>
</select>
<br><br><br>
</div>
</div>
<br><br><br>
<center><input type="submit" value="VIEW" name="view"></center>
</form>
<script>
function OnSelectionChange(){
</script>
<?php
$selectionToView=$_POST['selectionToView']
if(isset(selectionToView) == "ID"){
?>
<script>document.write("<center><input type="submit" value="VIEW" name="view"></center>");</script>
<?php
}
?>
<script>
}
</script>

I've sligthly changed the HTML and wrote JavaScript for it with a little help of CSS.
function OnSelectionChange(value) {
document.getElementById("submit-button").disabled = true;
if ( value == "Rank" ) {
document.getElementById("rank-select").style.display = "block";
document.getElementById("department-select").style.display = "none";
document.getElementById("text").style.display = "none";
} else if ( value == "Department" ) {
document.getElementById("rank-select").style.display = "none";
document.getElementById("department-select").style.display = "block";
document.getElementById("text").style.display = "none";
} else if ( value == "Select" ) {
document.getElementById("rank-select").style.display = "none";
document.getElementById("department-select").style.display = "none";
document.getElementById("text").style.display = "none";
} else {
document.getElementById("rank-select").style.display = "none";
document.getElementById("department-select").style.display = "none";
document.getElementById("text").style.display = "block";
}
}
function onSecondSelectChange(value) {
if ( value != "Select" ) {
document.getElementById("submit-button").disabled = false;
} else {
document.getElementById("submit-button").disabled = true;
}
}
function onTextChange(value) {
if ( value != "" ) {
document.getElementById("submit-button").disabled = false;
} else {
document.getElementById("submit-button").disabled = true;
}
}
#rank-select,
#department-select,
#text {
display: none;
}
<form>
<div class="outer-div" >
<div class="inner-div">
<h2>Search By:</h2>
<select name="selectionToView" class="SelectBox" onchange="OnSelectionChange(this.options[this.selectedIndex].value)">
<option value="Select">-- Select --</option>
<option value="ID">ID</option>
<option value="FirstName">First Name</option>
<option value="MiddleName">Middle Name</option>
<option value="LastName">Last Name</option>
<option value="Email">Email</option>
<option value="Phone">Phone</option>
<option value="IP_Phone">IP Phone</option>
<option value="OfficeNumber">Office Number</option>
<option value="CoordinatorName">Coordinator Name</option>
<option value="Rank">Rank</option>
<option value="Department">Department</option>
<option value="JoiningDate"> Joining Date</option>
<option value="Committee_AND_Unit">Committee/Unit</option>
</select>
<select name="rank-select" id="rank-select" onchange="onSecondSelectChange(this.options[this.selectedIndex].value)">
<option value="Select">-- Select --</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="department-select" id="department-select" onchange="onSecondSelectChange(this.options[this.selectedIndex].value)">
<option value="Select">-- Select --</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" name="text" id="text" onchange="onTextChange(this.value)">
</div>
</div>
<input type="submit" value="VIEW" name="view" id="submit-button" disabled="disabled">
</form>

If i understood you correctly, you want another select list or textarea to appear under the current select list when the user selects certain option. Select list when he picks Rand or Department, and textarea in all other cases.
What i would do is make those extra elements you need(another select list and textarea) and put them on display:none. Then with onchange event handler use a function that would check which option is selected and display/hide whatever you need. You would need an extra select list for each option in the first select list, but in case you are populationg option from a database, then you could use ajax to dinamicaly populate single select list depending on what the user picked.
Hope this helps.
onchange would be like:
onchange='displayList(this)'
function would look something like this:
function displayList(selectObject){
var option = selectObject.value;
if(option == 'Department' || option == 'Rank'){
document.getElementById('select').style.display='inline';
document.getElementById('text').style.display='none';
}
else{
document.getElementById('select').style.display='none';
document.getElementById('text').style.display='inline';
}
if(option == 'Select'){
document.getElementById('select').style.display='none';
document.getElementById('text').style.display='none';
}
}

Add a bootstrap class to JS class

I have a small question,
At the moment I have a 2 option boxes in my Test.php file. I want to show my second option box when I select leverancier in the first one. so far so good!
But now I want to apply some CSS to it...
for example the bootstrap form-control class...
this is my (simple) code:
<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden");
}
else {
$("#Klanttable").addClass("hidden");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
So how can I make my first option box the same as my second option box?

With Jquery you can add multiple classes at once so your solution would just be:
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});

<script>
$(function() {
$("#corracrtieby").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Leverancier') {
$("#Klanttable").removeClass("hidden form-control");
}
else {
$("#Klanttable").addClass("hidden form-control");
$("#Klanttable").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
<option value="--corracrtieby--">--corracrtieby--</option>
<option value="Petrogas">Petrogas</option>
<option value="Leverancier">Leverancier</option>
<option value="Klant">Klant</option>
</select>
<br>
<select name="Klanttable" class="hidden form-control" id="Klanttable" style="width: 300px">
<option value="--Klanttable--">--Correctie maatregel--</option>
<option value="Test1">Petrogas</option>
<option value="Test2">Leverancier</option>
<option value="Test3">Klant</option>
<option value="Test4">Klant</option>
<option value="Test5">Klant</option>
</select>
now it's removing only the class, not the option box itself......

Multiple show / hide jquery

My code below is showing the proper city/state div's when the matching country is selected from the drop down, but it's not hiding the previous one if the user decides to select another state. Do I have to create an if/else each for each div i want to hide?
<script type="text/javascript">
$(document).ready(function() {
...
//city & state display
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0)
$("#state_label").hide();
else {
$("#state_label").show();
stateSelect.show();
}
});
});
</script>
html code:
<label>Country/Locale:</label>
<select id="ctry" name="country">
<option value="">-- Select</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
</select><br />
<!-- US -->
<div id="state_US" style="display:none">
<label id="state_label" style="display:none">State:</label>
<span class="rstate">
<select name="u_state">
<option value="">-- State US</option>
<option value="AL">Alabama</option>
</select>
</span>
Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" />
</div>
<!-- CA -->
<div id="state_CA" style="display:none">
<label id="state_label" style="display:none">Province:</label>
<span class="rstate">
<select name="c_state">
<option value="">-- Prov CA</option>
<option value="ON">Windsor</option>
</select>
</span>
Postal or Place:<input style="margin-left:43px;" type="text" name="locca" id="locca" size="30" />
</div>
<!-- GB -->
<div id="state_GB" style="display:none">
<label id="state_label" style="display:none">City or Region:</label>
<span class="rstate">
<select name="k_state">
<option value="">-- Place</option>
<option value="AU">UK!</option>
</select>
</span>
</div>
<!-- AU -->
<div id="state_AU" style="display:none">
<label id="state_label" style="display:none">City or Region:</label>
<span class="rstate">
<select name="a_state">
<option value="">-- Place</option>
<option value="AU">UK!</option>
</select>
</span>
</div>

Remove the state_label ids..
Add the unused class state to the state_CA, state_US etc. elements..
So each state group should be
<div id="state_US" class="state" style="display:none">
<label style="display:none">State:</label>
<span class="rstate">
<select name="u_state">
<option value="">-- State US</option>
<option value="AL">Alabama</option>
</select>
</span>
Zip or City:<input style="margin-left:43px;" type="text" name="locus" id="locus" size="30" />
</div>
And change your script to be
<script type="text/javascript">
$(document).ready(function() {
...
//city & state display
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
stateSelect.show();
});
});
</script>
Demo at http://jsfiddle.net/gaby/PYx2v/

You cannot have multiple elements with the same ID. Your label state_Label is not unique. You should change this, otherwise some browsers will not show your label.
You hide all elements having the css-class "state". But there is no element having this class. I guess that you need to add class="state" to all of your state_*-divs.

Something like this logic might work for you:
var previous;
$(document).ready(function() {
$("#ctry").change(function() {
$(".state").hide();
var stateSelect = $("#state_" + $(this).val());
if (stateSelect.length === 0) {
$("#state_label").hide();
} else {
if (previous) {
previous.hide(function() {
$("#state_label").show();
stateSelect.show();
previous = stateSelect;
});
} else {
$("#state_label").show();
stateSelect.show();
previous = stateSelect;
}
}
});
});
Though it would be easier if they all had the same CSS class, with which you could easily hide them and then show the one that was selected.