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.

jQuery - Autoselect option on selectbox doesn't function well

I have 2 select boxes. When I select an option on selectbox1, it automatically changes the corresponding value on selectbox2 regardless of value but order.
The thing is, the code is working fine until after a few tries. Then even if I change the option on selectbox1, it doesn't update the one on selectbox2.
To reproduce the issue; go through A to E, then repeat.
Code:
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
Also JSFiddle version: https://jsfiddle.net/153w074d/

No need for all that code, just work with selectedIndex:
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$(".secondSelectBox").get(0).selectedIndex = selectedIndex;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
What happened in your original code is that, in some way, the selected attributes are being messed around. Try this: Change to each option from A to E, then start over from A, the selection stops working. Then inspect the second select to see that there are more than one option with selected="selected" attribute. Not sure what caused that tho.

#DontVoteMeDown's answer will certainly work, but the reason you're having this issue is because of the discrepancy between .prop and .attr. Both are similar, but don't refer to the same, identical underlying value.
If you change the below two lines to use the .prop value instead of .attr, your code will work. See the working code example below.
$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
$(secChildIdx).attr("selected", "selected"); // change to .prop
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeProp('selected');
$(secChildIdx).prop("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>

You can also use prop to select option.
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>

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.

Using javascript within php in order to make a selectbox visible

I am using php and want my selected selectbox to become visible based on which one I select. My html code is
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
And my php code so far is
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
}
else if ($selection == 2) {
}
else {
}
}
?>
so my question is what would the javascript look like inside of the if/else statement to make the selectboxes visible?

Why not do it client side using javascript?
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections" id="ddlSelections" onChange="changeSelect()"> <!-- call function on change -->
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" id="ddlTickets"> <!-- visible by default -->
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none" id="ddlSales">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
javascript
<script>
function changeSelect()
{
document.getElementById('ddlTickets').style.display = "none";
document.getElementById('ddlProjects').style.display = "none";
document.getElementById('ddlSales').style.display = "none";
switch(document.getElementById('ddlSelections').value) // Get selected one
{
case "1":
document.getElementById('ddlTickets').style.display = "block";
break;
case "2":
document.getElementById('ddlProjects').style.display = "block";
break;
case "3":
document.getElementById('ddlSales').style.display = "block";
break;
}
}
</script>
If you must use PHP
<form name="frmIndex" action="index.php" method="post">
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" selected>Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
*/
}
else if ($selection == 2) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" selected>Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
*/
}
else {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" >Projects</option>
<option value="3" selected>Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
*/
}
}
?>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

A slightly shorter example using jQuery's .change() which is more unobtrusive than the on* attributes like onclick, onchange, etc.
replace all the style="display:none" with a class="subDDL" and then simply style with .subDDL{display: none;}. I did leave one style="display:initial" for the default option.
then add an id to your sublists that correspond to the values in ddlSelections
now you only need one submit button
$("[name='ddlSelections']").change(function(){
$(".subDDL").hide();
$('#' + $("[name='ddlSelections'] option:selected").val()).show();
});
.subDDL{
display: none;
}
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<select id="1" name="ddlTickets" class="subDDL" style="display:initial">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select id="2" name="ddlProjects" class="subDDL">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select id="3" name="ddlSales" class="subDDL">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" value="Submit" name="btnChoose" />
</form>

how do you make a dependent drop down list in php

Is there any chance that I can get dependent drop down list in php - without using jquery or javascript - please help me through few options or suggestions if available
/group 1 /
<div class="form-group">
<label for="return_ori">Return scenarios group A signals</label>
<select name="return_ori" class="form-control" id="Site Orientation">
<option value="East">none</option>
<option value="GA">hello1 </option>
<option value="GB">hello2 </option>
<option value="GC">hello3 </option>
<option value="GD">hello4 </option>
<option value="GE">hello5 </option>
<option value="GF">hello6 </option>
<option value="GG">hello7 </option>
<option value="GH">hello8 </option>
<option value="GI">hello9 </option>
<option value="GK">hello10 </option>
<option value="Gl">hello11</option>
<option value="GM">hello12</option>
<option value="GN">hello13</option>
<option value="GO">hello14</option>
</select>
</div>
/ group 2 /
<div class="form-group">
<label for="returnb_ori">Return scenarios group B signals</label>
<select name="returnb_ori" class="form-control" id="Site Orientation">
<option value="reb1">None </option>
<option value="reb2">congrats1 </option>
<option value="reb3">congrats2</option>
<option value="reb4">congrats3</option>
<option value="reb5">congrats4</option>
<option value="reb6">congrats5</option>
<option value="reb7">congrats6</option>
<option value="reb8">congrats7 </option>
<option value="reb9">congrats8</option>
<option value="reb10">congrats9 </option>
<option value="reb11">congrats10 </option>
<option value="reb12">congrats11</option>
<option value="reb13">congrats12</option>
<option value="reb14">congrats13</option>
</select>
</div>
Is there any chance to have drop down for group 1 and group 2 and dependent drop down for other elements as sub categories - thank you

If you don't want to use js in your dependable dropdowns, then you have to refresh the page with some query string.

You just have submit the form but use some logic to tell the form how to build itself based on previous selected options. Here is a basic example.
function dropDown($title='cat')
{
ob_start();
echo '<select name="'.$title.'">';
for($i = 0; $i < 10; $i++) {
$name = rand(100,999);
echo '<option value="'.$title.$name.'">'.$title.$name.'</option>';
}
echo '</select>';
$data = ob_get_contents();
ob_end_clean();
return $data;
}
?>
<form method="post">
<?php echo dropDown(); ?>
<?php if(!empty($_POST) && empty($_POST['subcat'])) {
echo dropDown('subcat');
?><input type="text" name="subcat" value="true" />
<?php }
?>
<input type="submit" value="<?php echo (!empty($_POST['cat']))? 'SAVE':'GET SUB'; ?>" />
</form>
Page load:
<form method="post">
<select name="cat">
<option value="cat649">cat649</option>
<option value="cat801">cat801</option>
<option value="cat974">cat974</option>
<option value="cat519">cat519</option>
<option value="cat914">cat914</option>
<option value="cat799">cat799</option>
<option value="cat968">cat968</option>
<option value="cat687">cat687</option>
<option value="cat403">cat403</option>
<option value="cat355">cat355</option>
</select>
<input type="submit" value="GET SUB" />
</form>
After submit:
<form method="post">
<select name="cat">
<option value="cat545">cat545</option>
<option value="cat442">cat442</option>
<option value="cat733">cat733</option>
<option value="cat947">cat947</option>
<option value="cat446">cat446</option>
<option value="cat327">cat327</option>
<option value="cat706">cat706</option>
<option value="cat190">cat190</option>
<option value="cat143">cat143</option>
<option value="cat254">cat254</option>
</select>
<select name="subcat">
<option value="subcat455">subcat455</option>
<option value="subcat728">subcat728</option>
<option value="subcat478">subcat478</option>
<option value="subcat883">subcat883</option>
<option value="subcat756">subcat756</option>
<option value="subcat765">subcat765</option>
<option value="subcat978">subcat978</option>
<option value="subcat589">subcat589</option>
<option value="subcat820">subcat820</option>
<option value="subcat234">subcat234</option>
</select>
<input type="text" name="subcat" value="true" />
<input type="submit" value="SAVE" />
</form>