Disable selected option in other selects

Disable selected option in other selects - javascript

How can I make all chosen options disabled in all three options? Its only working when the first one is selected.
$(".selectClass").change(function() {
$("select option").prop("disabled", false);
$(".selectClass").not($(this)).find("option[value='" + $(this).val() + "']").prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="selectClass">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select class="selectClass">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select class="selectClass">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
http://jsfiddle.net/84w50z2v/1/

So far i understood you correctly you just need to set disabled to the HTML elements.
your fiddle:
http://jsfiddle.net/84w50z2v/2/
<select class="selectClass">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select class="selectClass">
<option value="1" disabled>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<select class="selectClass">
<option value="1" disabled>1</option>
...
greetings

For really disabling in all 3 option lists, you need to use this-
var selectedValues = [];
$(".selectClass").change(function () {
selectedValues.push($(this).val());
$.each(selectedValues,function(i,el){
$(".selectClass").not($(this)).find("option[value='" + el + "']").prop("disabled", true);
});
});
Here's jsfiddle.

Related

jquery confused same class to option in select

i want to be disabled duplicate options in my dropdown but my jquery are confuse.
var map = {};
$('select.ex option').addClass(function () {
if (map[this.value]) {
$(this).prop('disabled',true)
}
map[this.value] = true;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">4</option>
</select>
I necessary to write same class name. it's possible to edit my code to disabled duplicate options?

You can use .each loop to iterate through your select then loop through option inside selects and if the value already exist inside {} remove them else mark it as true.
Demo Code :
//loop through select
$('select.ex').each(function() {
var map = {}; //define this
//loop through options
$(this).find("option").each(function() {
if (map[this.value]) {
$(this).prop('disabled', true)
} else {
map[this.value] = true;
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">4</option>
</select>

Disabling Second Drop Down Menu Options Based on First Drop Down Menu Options

I need to disable the options in the Aspired drop-down menu.
E.g User chose 3 for "Current" and the option 1 and 2 will be disabled for Aspired. If the user chose 4 in "Current" then option 1, 2 and 3 will be disabled and so on and so forth. I need help in creating logic using JavaScript.
<label>Current:</label>
<select name="Current">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>Aspired:</label>
<select name="Aspired">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

This might help you with your logic. Remember it's an ES6 way.
Pure Js ES6 Version
function onCurrentChange() {
const options = document.getElementById("aspired").options;
const listArray = Array.from(options);
listArray.forEach(item => {
if (item.value < document.getElementById("current").value) {
item.disabled = true;
}
});
}
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
The backward compatible version (IE9+) Version
function onCurrentChange() {
const options = document.getElementById("aspired").options;
Array.prototype.forEach.call(options, function(child, index) {
if (child.value < document.getElementById("current").value) {
child.disabled = true;
}
});
}
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Jquery Version
function onCurrentChange() {
$("#aspired option").each(function() {
if ($(this).val() < $("#current").val()) {
$(this).attr("disabled", true);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

Not ready to write any code now, but you can use JavaScript to get the value of the "current" select after it has been selected, to do that you can add a click event listener for the options.
To get the value, check out this thread Get selected value in dropdown list using JavaScript?
From there, use it to automatically populate the options for the aspired select element, using conditions based on the first value...
This might help for the last step Adding options to select with javascript

function disFun(){
var Aspired = document.getElementById("Aspired").options;
var Current = document.getElementById("Current").value;
for (var i=1; i < +Current; i++) {
Aspired[i].disabled = true;
}
}
<label>Current:</label>
<select id="Current" name="Current" onchange="disFun()">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>Aspired:</label>
<select id="Aspired" name="Aspired">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

If you can use Jquery. You need to select the value chosen say n from Current select. Then loop until that value from 1 to n in the Aspired select and add 'disabled attribute' as true
<label>Current:</label>
<select name="Current">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>Aspired:</label>
<select name="Aspired">
<option value="select">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
$(document).ready(function(){
$("select[name='Current']").change(function(){
$("select[name='Aspired']").children("option").attr('disabled', false) // makes all options to selectable in case of new selection in Current select
for (i = 0; i < $(this).children("option:selected").val(); i++) {
$("select[name='Aspired']").children('option[value='+ i +']').attr('disabled', true) // disabling all the values uptil the select value
}
});
});

Calculate sum of two groups of select fields separately

I want to get sum of select fields 1 to 8 and 9 to 16 in JavaScript. How can I do that?
//sum
<select name="formselect1" style="position:absolute;left:279px;top:235px;width:103px;z-index:2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect2" style="position:absolute;left:279px;top:259px;width:103px;z-index:3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect3" style="position:absolute;left:279px;top:283px;width:103px;z-index:4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect4" style="position:absolute;left:279px;top:307px;width:103px;z-index:5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect5" style="position:absolute;left:279px;top:331px;width:103px;z-index:6">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect6" style="position:absolute;left:279px;top:355px;width:103px;z-index:7">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect7" style="position:absolute;left:279px;top:379px;width:103px;z-index:8">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect8" style="position:absolute;left:279px;top:402px;width:103px;z-index:9">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" name="sum1" id="sum1" />
<select name="formselect9" style="position:absolute;left:384px;top:234px;width:103px;z-index:10">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect10" style="position:absolute;left:384px;top:258px;width:103px;z-index:11">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect11" style="position:absolute;left:384px;top:282px;width:103px;z-index:12">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect12" style="position:absolute;left:384px;top:306px;width:103px;z-index:13">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect13" style="position:absolute;left:384px;top:330px;width:103px;z-index:14">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect14" style="position:absolute;left:384px;top:354px;width:103px;z-index:15">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect15" style="position:absolute;left:384px;top:378px;width:103px;z-index:16">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect16" style="position:absolute;left:385px;top:402px;width:103px;z-index:17">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" name="sum2" id="sum2" />

This how it can be done. Calculate the sum on load and then each time any of the boxes change.
<form>
//sum
<select name="formselect1" style="position:absolute;left:279px;top:235px;width:103px;z-index:2" onchange="calcSum1();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect2" style="position:absolute;left:279px;top:259px;width:103px;z-index:3" onchange="calcSum1();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect3" style="position:absolute;left:279px;top:283px;width:103px;z-index:4" onchange="calcSum1();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect4" style="position:absolute;left:279px;top:307px;width:103px;z-index:5" onchange="calcSum1();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect5" style="position:absolute;left:279px;top:331px;width:103px;z-index:6" onchange="calcSum1();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect6" style="position:absolute;left:279px;top:355px;width:103px;z-index:7" onchange="calcSum1();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect7" style="position:absolute;left:279px;top:379px;width:103px;z-index:8" onchange="calcSum1();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect8" style="position:absolute;left:279px;top:402px;width:103px;z-index:9" onchange="calcSum1();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" name="sum1" id="sum1" value="0" />
<select name="formselect9" style="position:absolute;left:384px;top:234px;width:103px;z-index:10" onchange="calcSum2();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect10" style="position:absolute;left:384px;top:258px;width:103px;z-index:11" onchange="calcSum2();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect11" style="position:absolute;left:384px;top:282px;width:103px;z-index:12" onchange="calcSum2();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect12" style="position:absolute;left:384px;top:306px;width:103px;z-index:13" onchange="calcSum2();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect13" style="position:absolute;left:384px;top:330px;width:103px;z-index:14" onchange="calcSum2();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect14" style="position:absolute;left:384px;top:354px;width:103px;z-index:15" onchange="calcSum2();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect15" style="position:absolute;left:384px;top:378px;width:103px;z-index:16" onchange="calcSum2();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="formselect16" style="position:absolute;left:385px;top:402px;width:103px;z-index:17" onchange="calcSum2();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" name="sum2" id="sum2" value="0" />
</form>
<script>
var sum1 = document.getElementById("sum1").value;
function calcSum1(){
sum1 = 0;
var boxVal = 0;
for(var i=0; i<8; i++) {
boxVal = parseInt(document.forms[0].elements[i].value);
sum1 += boxVal;
}
document.getElementById("sum1").value = sum1;
}
var sum1 = document.getElementById("sum2").value;
function calcSum2(){
var boxVal = 0;
sum2 = 0;
for(var i=9; i<17; i++) {
boxVal = parseInt(document.forms[0].elements[i].value);
sum2 += boxVal;
}
document.getElementById("sum2").value = sum2;
}
// initialize the sums
calcSum1();
calcSum2();
</script>

Multiple select, disable option

for disable option im using this:
function handleSelection(source, dest) {
itemRemove = dest.length - source.selectedIndex;
for(i=dest.length-1; i>=itemRemove; i--){
dest.options[i].disabled = true;
}
}
<select id="s1" onchange="handleSelection(this, s2)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="s2" onchange="handleSelection(this, s1)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
but this job only with 2 select. I need then this job with multiple select.
Thanks!

I am not sure what you trying to do and if you approach is good but try my code. it will work
function handleSelection(source, destArr) {
for( dest in destArr){}
itemRemove = dest.length - source.selectedIndex;
for(i=dest.length-1; i>=itemRemove; i--){
dest.options[i].disabled = true;
}
}
}
<select id="s1" onchange="handleSelection(this, [s2,s3,s5])">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="s2" onchange="handleSelection(this, [s6,s7,s8])">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

in my script, selecting for example 2 in the first select, in the second clear the 4 and 3, and then remains the 1 and 2. (4 - 2 = 2). It works well, but now I can do the same job with the most select

Forcing multiple selects (dropdowns) to have unique values

On my page, there are select dropdown which need to be validated in certain way before I submit the page.
Here is how those selects looks like:-
HTML
<select name="first_select_0" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_1" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_2" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_3" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_4" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_5" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_6" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Rules:-
What I want is as follows:-
All the selects would be defaulted to Blank Value (-1)
Value of 1, 2 and 3 will be uniquely selected for all selects. This means that there would be only one select with a value of "1", only one select with a value of "2" and only one select with a value of "3".
All the remaining should have the value of "0".
What I did is below in JS. It's basically not much helpful :-(
JS
$("#submit-selection").click(function(e){
var count_selects = $(".select_style").length;
if (count_selects >=5 ) {
alert(count_selects + "is >=5");
}
else {
alert(count_selects + "is <5");
}
e.preventDefault();
});
My JsFiddle is
JSFiddle Link

If i clearly understood your problem, here is solution:
Add attribute selected="selected" to each tag "option" with value="-1".
Here is JS:
$(document).ready(function(){
$("#submit-selection").click(function(e){
var uniqueVals = [1,2,3];
var selectedVals = [];
var inputs = $(".select_style");
inputs.each(function(){
if(this.value == -1){
this.value = 0;
}
var intVal = parseInt(this.value)
if(uniqueVals.indexOf(intVal) != -1){
if(selectedVals.indexOf(intVal) != -1){
alert('validation is not passed');
return 0;
}else{
selectedVals.push(intVal);
}
}
});
e.preventDefault();
});
});
Fiddle: http://jsfiddle.net/weeklyTea/L9JEK/

This is a bit dirty, but i think is what you want:
HTML:
<form method="post" class="my-form" id="form-1" action="">
<select name="first_select_0" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_1" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_2" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_3" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_4" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_5" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_6" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" name="submit" id="submit-selection" value="Submit" class="submit-button btn btn-lg btn-primary" />
</form>
JS:
$(document).ready(function(){
$("#submit-selection").click(function(e){
var count_selects = $(".select_style").length;
var correct = true;
if($(".select_style option[value='1']:selected").length != 1){ correct = false; }
if($(".select_style option[value='2']:selected").length != 1){ correct = false; }
if($(".select_style option[value='3']:selected").length != 1){ correct = false; }
if($(".select_style option[value='0']:selected").length != count_selects-3){ correct = false; }
alert(correct);
e.preventDefault();
});
});
FIDDLE:
http://jsfiddle.net/frikinside/8wcp6/4/

We Keep Coding

JavaScript is the programming language of the Web.

Disable selected option in other selects - javascript

Related

jquery confused same class to option in select

Disabling Second Drop Down Menu Options Based on First Drop Down Menu Options

Calculate sum of two groups of select fields separately

Multiple select, disable option

Forcing multiple selects (dropdowns) to have unique values

Categories

Resources