Develop Reference

Reset select dropdown base on hierarchy

<script>
function refresh()
{
document.forms[0].submit();
}
</script>
<select name = "firstoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "1">1</option>
if($_POST['firstoption]!= "")
<select name = "secondoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "2">2</option>
if($_POST['secondoption]!= "" && $_POST['firstoption]!= "")
<select name = "thirdoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "3">3</option>
if($_POST['thirdoption]!= "" && $_POST['secondoption]!= "" && $_POST['firstoption]!= "")
<select name = "fourthoption" onChange ="refresh()"></select>
<option value = "">default option</option>
<option value = "4">4</option>
Hi,
I have 6 static dropdowns. (something like this for some reason I am currently having laptop problems so I could not copy and paste the code where I wrote down generic values)
DELETED (NO LONGER AN ISSUE FIX ON MY OWN)
Basically, I need 6 dropdown (all values kept after it s refresh) and when a dropdown values changes all of the dropdowns below it get reset.
EDIT:
I am looking for code to reset select option back to the default select option (base on hierarchy). Once an select option above it gets change. so if select "2" gets change select 3,4,5 6 value should change to default option. If select "4" gets change select 5,6 would be change to default option etc.
I do not want ajax or jQuery. I am looking for a solution with php, javascript, or html. I think the way to approach it is by comparing the previous and new index number of the select option being change
Note the code I provide is sudo code I can not copy and paste code due to current laptop state.
So the answer does not need to use my code.
I just want a php/javascript/html code that has multiple select options (4-6 select with 2 option in each) the other drop down will be disable until the select above get a value. SO option 2-6 will be disable until select 1 is pick then option 3-6 will be disable until a value for option 2 is pick).
If he user changes select 1 option will select 2-6 already have a value. Select 2-6 automatically switches to default option value. and option 3-6 is now disable until user select option for select 2
Also stack overflow does not allow bounty to be given until 24 hours so I can not give bounty until tomorrow around this time.

Some suggestions to facilitate the solution:
Give all your drop-down lists the same class attribute.
Use just one change event handler on a container element (or the whole document), and let the handler find out which select value was changed.
Create a function that, given an index, will clear all dropdowns from that index onwards, and will disable all of those, except the first one (at that index).
Call this function in the event handler, and also at page load, so to initialise the enabled/disabled status of those dropdowns.
Below is how that could work. I removed all HTML that is not necessary for this solution, but of course you may need more HTML attributes for other purposes:
const dropDowns = Array.from(document.querySelectorAll(".option"));
function reset(i) {
for (let other of dropDowns.slice(i)) {
other.selectedIndex = 0;
other.disabled = other !== dropDowns[i];
}
}
document.addEventListener("change", function (e) {
let i = dropDowns.indexOf(e.target);
if (i < 0) return;
// only allow input in next one if current value is not default:
reset(i+(dropDowns[i].selectedIndex > 0));
});
reset(0); // on page load, disable all except first one
<select class="option">
<option>default option</option>
<option>1</option>
<option>2</option>
</select>
<select class="option">
<option>default option</option>
<option>A</option>
<option>B</option>
</select>
<select class="option">
<option>default option</option>
<option>x</option>
<option>y</option>
</select>
<select class="option">
<option>default option</option>
<option>alpha</option>
<option>beta</option>
</select>
More on the following:
reset(i+(dropDowns[i].selectedIndex > 0));
dropDowns[i].selectedIndex will be 0 when the first entry (default) is selected, and a strictly positive number when any other entry is selected. So with > 0 this actually gives true for when a non-default entry is selected, false otherwise.
Now we want to make the next dropdown available only when the current one has a non-default entry selected, i.e. when this > 0 expression is true. By involving that expression in a + operation, we convert that boolean value to a number (0 for false, 1 for true). And so, that whole expression is either i+0 or i+1, depending on whether the current dropdown has the default value selected or not.
By providing that index (i or i+1) to the reset function, we make sure that the effect of selecting the default value or not is just like is needed.

There are many ways to accomplish this. The below should work with any number of select boxes. The code is commented to explain the steps.
<form accept="#" method="POST" id="myform">
<div>
<select name="firstoption">
<option value="">default option</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
<select name="secondoption" disabled>
<option value="">default option</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div>
<select name="thirdoption" disabled>
<option value="">default option</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>
<select name="fourthoption" disabled>
<option value="">default option</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
<script>
//get references to the DOM elements we need
var form = document.getElementById('myform');
var selects = form.querySelectorAll('select');
//register event listeners for each of the select boxes so we know when the value changes
for( let i=0; i<selects.length; i++ ) {
selects[i].addEventListener('change', function(evt) {
//select box "i" has changed
//since the value changed, reset other boxes after to the default value and disable
for( let i2 = (i+1); i2 < selects.length; i2++ ) {
selects[i2].value = "";
selects[i2].disabled = true;
}
//if the value of the changed select box is not the default, enable the next one
if( selects[i].value !== "" && selects[i+1] ) {
selects[i+1].disabled = false;
}
});
}
//catch form submission so we can validate the select boxes
form.addEventListener('submit', function(evt) {
//ensure we have all values before submitting
try {
for( let i=0; i<selects.length; i++ ) {
if( selects[i].value === "" ) {
alert(`Please select an option for box number ${i+1}`);
throw 0;
}
}
}catch(e) {
//error, prevent submission
evt.preventDefault();
return false;
}
//all good, submit
return true;
});
</script>

Load all select with document.querySelectorAll() using an expresion to get elements wich name ends with option, that's what $ do before the equal sign.
Then, in your function, check every select if one is empty, set to default value the next.
// Get all items wich name ends with "option"
let selects = document.querySelectorAll('[name$="option"]');
function refresh() {
// Loop into all selects
selects.forEach((item, index) => {
// Don't do this on last one
if(item.value == '' && index < selects.length - 2)
selects[index + 1].value = ""
});
// Check here the sixthoption value if you need it not empty to submit the form
}
<select name="firstoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="secondoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="thirdoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="fourthoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="fifthoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="sixthoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Another way using if's:
// Get all items wich name ends with "option"
let selects = document.querySelectorAll('[name$="option"]');
function refresh() {
// 0 = firstoption, 1 = secondoption... 5 = sixthoption
// If value is empty string, set default value for next element too
if(selects[0].value == "") selects[1].value = '';
if(selects[1].value == "") selects[2].value = '';
if(selects[2].value == "") selects[3].value = '';
if(selects[3].value == "") selects[4].value = '';
if(selects[4].value == "") selects[5].value = '';
}
<select name="firstoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="secondoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="thirdoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="fourthoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="fifthoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="sixthoption" onchange="refresh()">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

I assume that you not necessarily want to post upon each select change. Instead, let's see this approach:
<select class="fancy-select" id="s-1" name = "firstoption">
<option value = "">default option</option>
<option value = "1">1</option>
</select>
<select class="fancy-select" id="s-2" name = "secondoption">
<option value = "">default option</option>
<option value = "2">2</option>
</select>
<select class="fancy-select" id="s-3" name = "thirdoption">
<option value = "">default option</option>
<option value = "3">3</option>
</select>
<select class="fancy-select" id="s-4" name = "fourthoption">
<option value = "">default option</option>
<option value = "4">4</option>
</select>
<script type="text/javascript">
function myHandler() {
if (!this.value) {
var currentID = parseInt(this.id.substring(2));
for (let i = currentID; i < fancySelects.length; i++) fancySelects[i].value = "";
}
}
var fancySelects = document.querySelectorAll(".fancy-select");
for (let item of fancySelects) item.addEventListener("change", myHandler);
</script>
Fiddle: https://jsfiddle.net/0dfxytpc/1/
You see that despite the claims about Vue JS and jQuery making it easier, Javascript in itself is easy. If you know how to program in Javascript. My understanding is that once default is chosen you intend the subsequent items to be defaulted. If that's not the aim, then I misunderstood the goal.
Now, you can notice that this is pretty repetitive, we can surely make it nicer to appear. Let's generate the select tags on the server:
<?php
for ($index = 1; $index <= 4; $index++) {
?>
<select class="fancy-select" id="s-<?php echo $index; ?>">
<option value="">default option</option>
<option value="<?php echo $index; ?>"><?php echo $index; ?></option>
</select>
<?php
}
?>
<script type="text/javascript">
function myHandler() {
if (!this.value) {
var currentID = parseInt(this.id.substring(2));
for (let i = currentID; i < fancySelects.length; i++) fancySelects[i].value = "";
}
}
var fancySelects = document.querySelectorAll(".fancy-select");
for (let item of fancySelects) item.addEventListener("change", myHandler);
</script>
The code is small and easy to understand. Vue JS and jQuery would just overcomplicate this, they would add dependencies that you do not need. There is a trend of programmers who are less capable to work in Javascript and will argue that doing stuff is easier in Vue JS or jQuery. You can actually measure the power of that trend with the number of downvotes I get. I do not speak against the use of jQuery or Vue JS in general, although, I am not their fan in particular, but when you learn Javascript you should avoid getting dependant of a framework right from the start. As you get comfortable working with Javascript you might decide that Vue JS and jQuery is good for you. I would totally respect that decision, but do not make that decision before you learn Javascript properly.

You could try this:
const selects = document.querySelectorAll(".myoption");
const submit = document.getElementById("mysubmit");
selects.forEach((select, id) => select.addEventListener("change",() => {
const last = id === selects.length - 1;
if(! last) {
selects[id + 1].removeAttribute("disabled");
selects[id + 1].value = "";
}
for(let i = id + (select.selectedIndex ? 2 : 1); i < selects.length; ++i) {
selects[i].value = "";
selects[i].setAttribute("disabled", true);
}
submit.setAttribute("disabled", true);
if(last && select.selectedIndex) submit.removeAttribute("disabled");
}));
<select class="myoption">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="myoption" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="myoption" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="myoption" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="myoption" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select class="myoption" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="submit" id="mysubmit" value="submit" disabled>
Hope this helps.

As already a lot of ways are mentioned, here is what I came up with.
Assign every select a data-name attribute.
Every select would also have a class attribute. This class attribute would possess all previous parents' data-names.
When a particular select value changes, you get the data-name of it and use querySelectorAll to get all those elements who have this data-name in their class and set their values and disability accordingly.
var selects = document.querySelectorAll('select');
selects.forEach(function(select_dropdown){
select_dropdown.addEventListener('change',function(){
var kids = document.querySelectorAll('.' + this.getAttribute('data-name'));
var parent_value = this.value;
kids.forEach(function(child,index){
child.value = "";
if(parent_value == "" || index > 0){
child.setAttribute('disabled','disabled');
}else{
child.removeAttribute('disabled');
}
});
});
});
<select class="" data-name="select_1">
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select data-name="select_2" class="select_1" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select data-name="select_3" class="select_1 select_2" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select data-name="select_4" class="select_1 select_2 select_3" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select data-name="select_5" class="select_1 select_2 select_3 select_4" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select data-name="select_6" class="select_1 select_2 select_3 select_4 select_5" disabled>
<option value="">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>

You can add data attribute for each dropdown, that way you can track index of that dropdown, so on change all higher than index apply action..
when option is selected, reset rest of the boxes that are in order.
If previus select box not default, enable next box else disable it
var selects = document.getElementsByClassName("select")
for(var i = 0; i < selects.length; i++){
selects[i].addEventListener('change', function(e){
for(var x = 0; x < selects.length; x++){
//On select, reset selectboxes that commes after
if(Number(e.target.dataset.columns) < x){
selects[x][0].selected = true;
}
//If previus select box not default, enable next box
if(x > 0 && selects[x -1][0].selected != true){
selects[x].disabled = false;
}
//else dissable next box..
else if(x > 0 && selects[x -1][0].selected == true){
selects[x].disabled= true;
}
}
})
}
<select data-columns="0" class="select">
<option value = "">default option</option>
<option value = "1">1</option>
<option value = "1">1</option>
</select>
<select data-columns="1" disabled class="select">
<option value = "">default option</option>
<option value = "2">2</option>
<option value = "1">1</option>
</select>
<select data-columns="2" disabled class="select">
<option value = "">default option</option>
<option value = "3">3</option>
<option value = "1">1</option>
</select>
<select data-columns="3" disabled class="select">
<option value = "">default option</option>
<option value = "4">4</option>
<option value = "1">1</option>
</select>

Hide select options based on previous selections

Is it possible to hide options in a select/dropdown with jQuery based on the user's selection from a previous dropdown e.g:
If user is 8 (Age Select/Dropdown), and chooses subject English (Subject Select/Dropdown) then hide Location 2 from (Locations dropdown)?
<select name="age">
<option value="8">8</div>
<option value="9">9</div>
<option value="10">10</div>
<option value="11">11</div>
</select>
<select name="subject">
<option value="eng">English</div>
<option value="maths">Maths</div>
<option value="science">Science</div>
</select>
<select name="subject">
<option value="loc-1">Location One</div>
<option value="loc-2">Location Two</div>
<option value="loc-3">Location Three</div>
</select>
Thank you!

you just need to add change function to your drop-down and according to your requirement you need to add your logic. see below example.
$(document).ready(function(){
$("#age").change(function(){
hideOption();
})
$("#subject").change(function(){
hideOption();
})
})
function hideOption(){
var age=$("#age").val();
var subject=$("#subject").val();
if(age==8 && subject=="Maths"){
$("#location [value='Location Two']").hide();
}
else{
$("#location [value='Location Two']").show();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" id='age'>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<select name="subject" id='subject'>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
</select>
<select name="Location" id='location'>
<option value="Location One">Location One</option>
<option value="Location Two">Location Two</option>
<option value="Location Three">Location Three</option>
</select>

You can do something like below
$(document).on('change', '.age', function(e){
var val = $(this).val();
var subject = $('.subject').find(":selected").val();
if(val == 8 && subject == 'English' ){
$('.location option[value="Two"]').hide();
} else {
$('.location option[value="Two"]').show();
}
})
$(document).on('change', '.subject', function(e){
var age = $('.age').find(":selected").val();
var val = $(this).val();
if(age == 8 && val == 'English' ){
$('.location option[value="Two"]').hide();
} else {
$('.location option[value="Two"]').show();
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="age" class="age">
<option >select</8>
<option value="8">8</8>
<option value="9">9</8>
<option value="10">10</8>
<option value="11">11</8>
</select>
<select name="subject" class="subject">
<option value="English">English</8>
<option value="Maths">Maths</8>
<option value="Science">Science</8>
</select>
<select name="location" class="location">
<option value="One">Location One</8>
<option value="Two">Location Two</8>
<option value="Three">Location Three</8>
</select>

With jQuery you can use .hide() and .show() to toggle element visibility. First however, you can check if the value of a select (for example age) was changed. Based on the logic you want to have, you can for example check what the value of the change was and do something if it matches a condition.
For example:
$( "#age-select" ).change(function() {
var value = $(this).val();
if(value == 8) {
$("#location-two").hide();
} else {
$("#location-two").show();
}
});
However, notice that I added an id for the "Location Two" option ("location-two") and for the age select element. Also, to make this work properly, you have to fix the values so that they're not all 8 and fix the closing tags of the elements (not ).

javascript - Hide Options from Multiple Selection Box when an option from another select is selected

I need your help. So what I want to do is when a user select an option from one select, automatically hide an option from another multiple select.
Example:
if a user choose Car from select A, I want the car option from the select B to be automatically removed or hidden.
select A:
<select name="my_option_one" required id="id_my_option_one">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
Select B:
<select name="my_option_two" id="id_my_option_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
This is what I have tried but none of it worked.
$(document).ready(function() {
$("#id_my_option_one").change(function() {
if ($(this).val() === 'C') {
$("#id_my_option_two option[value='C']").options[0].remove();
$('select[name=my_option_two] option:eq(1)').hide();
$("#id_my_option_two option[value=" + 'C' + "]").hide();
$("#id_my_option_two option[value='C']").attr('disabled','disabled').hide();
}
});
});

function my_optionsChange() {
$("#id_my_options_two option").show(); //.css("display", "block");
$("#id_my_options_two option[value='" + $("#id_my_options").val() + "']").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="my_options" required id="id_my_options" onchange="my_optionsChange()">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>

I made an example which is longer because it's split into parts so you understand better what is going on.
I tried to name the variables so that it's clear what they are, but if you have any questions, please ask in the comments.
Let me know if this works for you.
const firstSelect = $('#id_my_options')
const secondSelect = $('#id_my_options_two')
firstSelect.on('change',function() {
const selected = $(this).find('option:selected');
const selectedValue = selected.val()
const secondOptions = secondSelect.children();
secondOptions.each(function() {
const secondValue = $(this).val()
secondValue === selectedValue ? $(this).hide() : $(this).show()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="Choose" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>

<select name="my_options" id="firstblock" onchange="disable(2,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options" id="secondblock" onchange="disable(1,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<script>
function disable(needtoblock,val){
console.log(needtoblock+" "+val);
if(val != ""){
if(needtoblock == 1){
$("#firstblock option[value='"+val+"']").prop('disabled', true);
}else if(needtoblock == 2){
$("#secondblock option[value='"+val+"']").prop('disabled', true);
}else{
}
}else{
$("#secondblock option").prop('disabled', false);
$("#firstblock option").prop('disabled', false);
}
}
</script>
This is how code could look, definetly you need to update and make it suitable for you.

I know, this is a bit late, but maybe it is of interest to someone out there. I understood the demand of OP so, that the hiding of options was to be done in any direction, or potentially spanning over multiple selector boxes. The following script will do exactly that: if you select an option in one selector it will go through the other selectors of the defined group $grp (by doing $grp.not(this).each((i,trg)=> ...)) and will hide/show all options there, depending of whether thay have been selected elsewhere already.
The $(to).toggle(...) method sets the visibility of each option (to) within trg, based on the existence of selected options with the same value in the sibling selectors of trg (again, limited to the current group $grp).
Maybe the script is a little too condensed for easy reading but it shows how much you can achieve with very little code when you use the power of jQuery.
const $grp=$('select[id^=id_my_options]') // define the selector group
$grp.on('change',function(ev){ // bind the change event ...
$grp.not(this).each((i,trg)=> // work on each sibling-selector (trg) of clicked
// selector (this), but only within jquery
// selection $grp
$('option[value!=""]',trg).each((j,to)=> // for all options of sibling-selectors of
// trg (within jquery selection $grp):
$(to).toggle($grp.not(trg).find('option[value='+to.value+']:selected').length==0))
// toggle the visibiltiy of that option
)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car2</option>
<option value="H">House2</option>
<option value="A">Airplane2</option>
</select>
<select name="my_options_three" id="id_my_options_three" multiple="multiple">
<option value="O">yet another option</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>
<br><br>
<select name="my_options_four" id="id_your_options_four" multiple="multiple">
<option value="O">and some unrelated options</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>

JQuery : Assign null to selected dropdown value

I have two dropdowns. I want the second dropdown, Assign value to be set to null when the specific value which is student from the first dropdown is chosen.
First dropdown:
<select name="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
This is the second dropdown which is hidden, shown only when Reg with value admin is chosen.
<select name="Assign">
<option value="">Choose</option>
<?php
$sql=odbc_exec($conn,'SELECT AssignCd, AssignNm FROM AssignList');
if(odbc_fetch_row($sql))
{
$AssignCd= odbc_result($sql, "AssignCd");
$AssignNm= odbc_result($sql, "AssignNm");
echo "<option value='".$AssignCd."'>".$AssignNm."</option>";
}
?>
</select>
I tried by doing the following but it doesn't work.
Please Help.
if($("#Reg").val("student");) {
$("#AssignCd").val("");
$("#AssignNm").val("");
}
UPDATED:
When Admin is selected, Assign with admin is chosen will be automatically selected. The problem is when I change my option to Student, the supposed value student is chosen is not shown.
How can I make the Assign value of both Admin and Student stay as it is and not jumbled up between them?
This is my code :
fiddle
$(document).ready(function() {
$("#Reg").on("change", function() {
if ($(this).find("option:selected").text() === 'Admin') {
$("#Assign").show();
$('select[name="Assign"] option[name="student_assign"]').attr("disabled",true).prop("selected", false).wrap('<span>');
$('select[name="Assign"] option[name="admin_assign"]').prop('selected',true);
}
else if ($(this).find("option:selected").text() === 'Student') {
$("#Assign").show();
$('select[name="Assign"] option[name="student_assign"]').prop('selected',true);
} else {
$("#Assign").hide().attr("disabled"," ");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select name="Reg" id="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
<select name="Assign" id="Assign">
<option value=" ">Choose</option>
<option name ="student_assign" value="student_assign">student is chosen</option>
<option name ="admin_assign" value="admin_assign">admin is chosen</option>
</select>

$('select[name="Reg"]').on('change', function() {}) this will trigger when you select an option in your select
$(this).find("option:selected").val() == "student" this will see if you have select an option with value "student"
$('select[name="Assign"] option[value="AssignCd"]').text(""); this sets the text of the option with value = AssignCd to empty
This is how far we can go without showing us your generated html for <select name="Assign">
$('select[name="Reg"]').on('change', function() {
if ($(this).find("option:selected").val() == "student") {
$('select[name="Assign"] option[value="AssignCd"]').text("");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
<select name="Assign">
<option value="AssignCd">AssignNm</option>
</select>
Update
There is no need to use .wrap() as far as i can see, use .hide() / .show() look at the example below.
$(document).ready(function() {
$("#Reg").on("change", function() {
if ($(this).find("option:selected").text() === 'Admin') {
$("#Assign").show();
$('select[name="Assign"] option[name="student_assign"]').attr("disabled", true).prop("selected", false).hide();
$('select[name="Assign"] option[name="admin_assign"]').prop('selected', true);
} else if ($(this).find("option:selected").text() === 'Student') {
$('select[name="Assign"] option[name="student_assign"]').attr("disabled", false).prop("selected", true).show()
$('select[name="Assign"] option[name="student_assign"]').prop('selected', true);
} else {
$("#Assign").hide().attr("disabled", " ");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select name="Reg" id="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
<select name="Assign" id="Assign">
<option value=" ">Choose</option>
<option name ="student_assign" value="student_assign">student is chosen</option>
<option name ="admin_assign" value="admin_assign">admin is chosen</option>
</select>

<select name="Reg" id="Reg">
<option value="">Choose</option>
<option value="admin">Admin</option>
<option value="student">Student</option>
</select>
First of all #<selector> is used to select Dom elements which have an id <selector>. You cannot access them with the name attribute and id selector.
As for your issue. you need to use the on change event of the first drop down to decide the visibility of the second drop down.
<select name="Assign" id="Assign">
<option value="">Choose</option>
....
....
$('#Assign').hide(); // first hide it so they cannot see it
$(document).on('change', '#Reg', function(e){
if($(this).val()=='admin'){
$('#Assign').show();
}else{
$('#Assign').val('').hide();
}
})

Multiple select elements - Handle with jQuery when select an option from all of them

I have two select elements with some options. What I want to do is to handle this with jquery so as I can get the values of them only when options have values.
<div class="panel-heading">
<select id="loading-by-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
<select id="loading-by-sub-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
</div>
If I want to handle with one select element only I use .on('change', function() with select element and it works, but with multiple select element how can I do it.

You should check if selectedIndex is not 0 for all your select elements.
$(document).on('change', 'select', function () {
var allChanged = true;
// check if there is any other select element which was not changed
$('select').each(function () {
if (this.selectedIndex == 0) {
allChanged = false;
}
});
// if all select elements have been changed
if (allChanged) {
alert('BOTH CHANGED');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-heading">
<select id="loading-by-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
<select id="loading-by-sub-tag">
<option value="" disabled selected> -- Select Subject --</option>
<option value="value1">Selection 1</option>
<option value="value2">Selection 2</option>
</select>
</div>

Just a side note, use .filter() :
$('select').change(function() {
var m = $(this).siblings('select').addBack();
var n = m.filter(function(){
return $(this).val() == null && $(this)
});
if ( !n.length ) alert('both selected')
});
DEMO