Develop Reference

Populated Select with html + JS

I have this Fiddle : https://jsfiddle.net/Ardee12/tL643rjq/3/
My problem is, I always get the same options at the third select from second select (vice versa), after I select an option from the first one. I need to stick for their own option (second and third select), but still have the populated function from their "rel" attribute. Can anyone please help me?
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>

You need to treat each of the kidSelect individually. Loop through each of them at the beginning and store a clone of their own options in each instance.
Then when you change main select, filter each set separately
// store a clone of each kidSelect options on page load
$('.kidSelect').each(function() {
$(this).data('options', $(this).children().clone());
});
$(".mainSelect").change(function() {
var rel = this.options[this.selectedIndex].getAttribute('rel');
// filter each kids options and set in place
$('.kidSelect').html(function() {
return $(this).data('options').filter('[rel=' + rel + ']').clone();
});
// trigger the change on page load also to do initial filtering
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>

I'm not entirely sure what you're trying to do but here is a guess.
I think you only want to effect the second select with the changes. For that you need to adjust your selector. It currently selects both selects.
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.js-kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.js-kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect js-kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>

JavaScript: Hide elements from a Dropdownlist execept one

i have this code:
$("#country").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#street option').clone());
}
var id = $(this).val();
$('#street').prop('disabled', false);
var options = $(this).data('options').filter('[class=' + id + ']');
$('#street').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country">
<option disabled selected>Select ...</option>
<option value='1'>Country_one</option>
<option value='2'>Country_two</option>
<option value='3'>Country_three</option>
<option value='4'>Country_four</option>
</select>
<select disabled class="js-select2" name="street" id="street">
<option disabled selected>Select a Street ...</option>
<option class='1' value='1'>Street_one</option>
<option class='1' value='2'>Street_two</option>
<option class='1' value='3'>Street_three</option>
<option class='1' value='4'>Street_four</option>
<option class='2' value='5'>Street_five</option>
<option class='2' value='6'>Street_six</option>
<option class='3' value='7'>Street_seven</option>
<option class='3' value='8'>Street_eight</option>
<option class='3' value='9'>Street_nine</option>
<option class='3' value='10'>Street_ten</option>
<option>Street not found</option>
</select>
I need when change the option from country in the second dropdownlist stays the Select a Street ... option and when i select the Country_four in the seccond dropdownlist only appears the option Street not found

Added a class default to your select option "Select a street", and added to the .filter() so it will always be selected
Added if / else to check the value selected - If it's anything but 4; Rebuild the options, and Enable the select. If it's 4; Empty the options, Add "Street not found" option, and Disable the select. After both of these, we select the first option so we're always showing the right message first
$('#country').on('change', function() {
// Stores the intial Options into a Data-attribute
if ($(this).data('options') === undefined) {
$(this).data('options', $('#street option').clone());
}
if ($(this).val() !== '4') {
// Fetches the Options from data, and filters for match & default option
let id = $(this).val();
let newOptions = $(this).data('options').filter(`[class="${id}"], [class="default"]`);
$('#street')
.empty()
.append(newOptions)
.prop('disabled', false)
} else {
// Creates an Option, containing only text
let newOptions = $('<option></option>').text("Street not found");
$('#street')
.empty()
.append(newOptions)
.prop('disabled', true)
}
// Selects the first Option in the Select
$('#street')[0].selectedIndex = 0
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country">
<option disabled selected>Select ...</option>
<option value='1'>Country_one</option>
<option value='2'>Country_two</option>
<option value='3'>Country_three</option>
<option value='4'>Country_four</option>
</select>
<select disabled class="js-select2" name="street" id="street">
<option class="default" disabled selected>Select a Street ...</option>
<option class='1' value='1'>Street_one</option>
<option class='1' value='2'>Street_two</option>
<option class='1' value='3'>Street_three</option>
<option class='1' value='4'>Street_four</option>
<option class='2' value='5'>Street_five</option>
<option class='2' value='6'>Street_six</option>
<option class='3' value='7'>Street_seven</option>
<option class='3' value='8'>Street_eight</option>
<option class='3' value='9'>Street_nine</option>
<option class='3' value='10'>Street_ten</option>
<option>Street not found</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 ).

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();
}
})

Disable 3th, 4th dropdown list if 1st or 2nr are selected

I have this issue: In my form there are 4 dropdownlist and when the 1st (category1) or 2nd (software1) dropdown list is selected, the 3th (category2) and 4th (software2) must be disabled.
For this issue I find this script at disable-second-dropdown-if-the-first-is-not-selected but I do not trust to modify this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<script type="text/javascript">
var setEnabled = function(e) {
var name = this.name.replace(/1/, '2'); //get name for second drop down
$('select[name=' + name + ']')
.prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
</script>
How to modify this?
Thanks

I think the main thing you want is to flip === for !==
However, to get this working on a matrix, where both top inputs trigger enabling/disabling of both bottom inputs, you'll need to test both on change of either.
var setEnabled = function(e) {
var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0;
$('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one
if (selected) {
$('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0)
}
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>