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>

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';
}
}

getting the value of dropdown menu's and displaying choice using JS

Once the user chooses which flavour they want, I want to be able to display a message on the webpage with the choices they have made from the drop-downs after the submit button is clicked. Here is what I have so far:
<select name="flavour1" required>
<option value="">Please select a Flavour!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<select name="flavour2" required>
<option value="">Please select a Flavour!</option>
<option value="noflavour">No More Flavours!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<input type="submit" value="Get your Flavour!!" onclick="getFlavour()">
JavaScript to attempt to display message into element with id: "postFlavour"
function getFlavour(){
var flavour1 = getElementById("flavour1").value;
var flavour2 = getElementById("flavour1").value;
document.getElementById("postFlavour").innerHTML = "Congratulations, here are your chosen flavours: "+flavour1+", "+flavour2;
}

function getFlavour(){
var sel1 = getElementById("flavour1");
var sel2 = getElementById("flavour2");
var flavour1 = sel1.options[sel1.selectedIndex];
var flavour2 = sel2.options[sel2.selectedIndex];
document.getElementById("postFlavour").innerHTML = "Congratulation, here are your chosen flavours: "+flavour1+", "+flavour2;
return false;
}

how to change jquery drop down value

On the basis of selection of Issue type i want to show 2nd drop down. if someone is select Board i want to show 2nd drop down and if someone select Branding i want to show different option. pls help
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>

In your select
<select name="issue_type" id="issue_type" onchange="change('issue_type');">
In your js file
$(document).ready(function(){
function change(id) {
//check condition if as
if ($('#' + id).val() == 'Board') {
//hide select except your required select
//like
$("#send_to").show().siblings().hide();
} else if () { // your next condition
//so on
}
}
});

here's jquery
$(document).ready(function(){
function changeVisibleSelect(elem){
var vis = $(elem).val() == 'Board';
$('#send_to' + (vis ? '_board' : '')).removeClass('hidden');
$('#send_to' + (vis ? '' : '_board')).addClass('hidden');
}
$('#issue_type').change(function(){
changeVisibleSelect(this);
});
changeVisibleSelect($('#issue_type'));
});
and minor edit to your html
<label for="Issue Type">Issue Type</label>
<select name="issue_type" id="issue_type">
<option value=""> Select </option>
<option value="Board">Board</option>
<option value="Branding/Clipon">Branding/Clipon</option>
</select>
<label for="Issue Type">Issue</label>
<select name="send_to" id="send_to">
<option value=""> Select </option>
<option value="Light Not Working">Light Not Working</option>
<option value="Broken Letter">Broken Letter</option>
<option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
<option value="Broken Board">Broken Board</option>
</select>
<select name="send_to" id="send_to_board">
<option value=""> Select </option>
<option value="Pasting Problem">Pasting Problem</option>
<option value="Clip-on light not working">Clip-on light not working</option>
</select>
i changed the id of second select
css:
.hidden{display:none}
here's working jsfiddle: http://jsfiddle.net/MXjmY/1/

Cascading Combo box HTML

I am not really a web person and am having trouble creating a cascading combo box. I have my options, but when I cannot figure out how to do a JavaScript command to switch the second box depending on the first box's selection.
These are my first set of options:
<select id="searchType" onchange="selectedOption(this)">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
Depending on what they click there I would like to show these set of options:
SESSIONS
<select id="secondOptions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
FILES
<select id="secondOptions">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
CLIENTS
<select id="secondOptions">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
And finally a textbox to type into to really specify the search.
Once again, I am trying to do this using JavaScript, but if there is a better way to do this let me know please.

Given the amended html mark-up:
<form action="#" method="post">
<select id="searchType">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
<select id="sessions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
<select id="files">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
<select id="clients">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
<fieldset id="textAreaSearchBox">
<legend>Search:</legend>
<textarea></textarea>
</fieldset>
</form>
(Note the changed ids, wrapping the form elements in a form, the addition of a fieldset, legend and textarea in the mark-up), the following JavaScript seems to work:
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
JS Fiddle demo.