Develop Reference

How to allow the selection ONLY one option for certain values in a multiple selection dropdown list?

I want to make a dropdown menu with the following options. I want be able to select a select multiple value for option A, B, and C, but disable multiple selection if option D is selected. How can I do that? Thanks.
<label>Choose an option:</label>
<select required multiple>
<option>Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">C</option>
</select>

Remove the other selected options if "D" is selected, otherwise allow multiple select (do nothing).
document.addEventListener("mouseup", checkMultiple);
function checkMultiple(evt) {
const selectr = evt.target.closest(`select`);
if (selectr && selectr.querySelector(`[value='D']:checked`)) {
[...selectr.options].forEach(v => v.selected = v.value === `D`);
}
}
/*
Note: the above is a shortened version of
the function in the original answer:
function checkMultiple(evt) {
if (!/option/i.test(evt.target.nodeName)) {
return true;
}
const selector = evt.target.parentNode;
const options = [...selector.querySelectorAll("option")];
if (options.find(v => v.value === "D").selected) {
options
.filter(v => v.value !== "D")
.forEach(v => v.selected = false);
}
}
*/
<label>Choose an option:</label>
<select required multiple>
<option>Please select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

let arr = [];
document.querySelector('#product_attr_ids').onchange = function(e) {
if (this.querySelectorAll('option:checked').length <= 1) {
arr = Array.apply(null, this.querySelectorAll('option:checked'));
} else {
Array.apply(null, this.querySelectorAll('option')).forEach(function(e) {
e.selected = arr.indexOf(e) > -1;
});
}
}
<p>The html of selections with multiple set to true.</p>
<p>Pressing command + click will not allow you to choose more than one option</p>
<p>Javascript. You can chnage the <strong>('option:checked').length <= 1) </strong> to whatever number you want, peraps you want your users to choose only 2 or 3 options.</p>
<label>Choose an option:</label>
<br />
<select id="product_attr_ids" required multiple>
<!-- Prevent user from select first blank option -->
<option disabled>Please select</option>
<option value="A">Attribute 1</option>
<option value="B">Attribute 2</option>
<option value="C">Attribute 3</option>
<option value="D">Attribute 4</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 ).

Get a value from few drop down

I want to get a value from few dropdown, this few dropdown have a same name in
a table of database.And user can see only one dropdown base on their previous selection, but I can't detect which dropdown is selected by users.So I make something bellow:
$dropvalue = "GetFromJavaascriptBellow" //use to get value from javascript bellow
<select id="dropdown1" name="dropdown1">
<option selected disabled>-- Please select a option --</option>
<option value="abc">abc</option>
<option value="def">def</option>
<option value="ghi">ghi</option>
</select>
<select id="dropdown2" name="dropdown2">
<option selected disabled>-- Please select a option --</option>
<option value="123">123</option>
<option value="456">456</option>
<option value="789">789</option>
</select>
<select id="dropdown3" name="dropdown3">
<option selected disabled>-- Please select a option --</option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>
<script>
$('#dropdown1').change(function () {
if ( this.value != '' || this.value != NULL)
{
$dropvalue = this.value //This line is what I can't do (is it possible php variable get value from javascript?)
}
else
{
}
});
$('#dropdown2').change(function () {
if ( this.value != '' || this.value != NULL)
{
$dropvalue = this.value //This line is what I can't do (is it possible php variable get value from javascript?)
}
else
{
}
});
$('#dropdown3').change(function () {
if ( this.value != '' || this.value != NULL)
{
$dropvalue = this.value //This line is what I can't do (is it possible php variable get value from javascript?)
}
else
{
}
});
</script>
My current solution is using ajax to get all of the value from all drop down, and set the default value ='0' to all dropdown, in ajax using if else statement to check which dropdown is not equal to 0 to confirm what is my value and which dropdown is.But this way is conflict with my another function, so I finding another way to did it

Try this. Use querySelectorAll
x=document.querySelectorAll("select.abc");
for(i=0;i<x.length;i++){
x[i].addEventListener("change",function(){
console.log(this.value); // your ajax call or whatever function you want excute
});
}
<select id="dropdown1" name="dropdown1" class="abc">
<option selected disabled>-- Please select a option --</option>
<option value="abc">abc</option>
<option value="def">def</option>
<option value="ghi">ghi</option>
</select>
<select id="dropdown2" name="dropdown2" class="abc">
<option selected disabled>-- Please select a option --</option>
<option value="123">123</option>
<option value="456">456</option>
<option value="789">789</option>
</select>
<select id="dropdown3" name="dropdown3">
<option selected disabled>-- Please select a option --</option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc">ccc</option>
</select>

How to use Jquery to change the third select box when the first select box is changed or triggered?

Hi i would like to know how to use jQuery to change the third select box (#school) when ever the first select box on change event is triggered.
When select box 1 is selected, select box should change and select box three should also automatically change to reflect the options that correspond to what is in select box two.
$("#certificate").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#program option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[class=' + id + ']');
$('#program').html(options).show();
});
$("#program").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#school option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[class=' + id + ']');
$('#school').html(options).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="certificate">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="select2" id="program" >
<option value="">Select State</option>
<option class="india" value="orissa">Orissa</option>
<option class="india" value="telangan">Telangan</option>
<option class="america" value="america">USA</option>
<option class="america" value="america">California</option>
</select>
<select name="select3" id="school" >
<option value="">Select city</option>
<option class="orissa">Nal</option>
<option class="orissa">Mir</option>
<option class="telangan">Hyd</option>
<option class="telangan">Vija</option>
<option class="america">KRK</option>
<option class="america">MRK</option>
</select>

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