I have two simple select inputs with same values, from 0% to 50% in both of them. I would like to control their values, so that when their values are combined, they do not exceed 50%. So no matter which of the two inputs is changed, the other one will change its value accordingly.
So let's say if first input has value 5% the second input should have value of 45% and vice versa.
I tried using .change function with an if/else if statement but i just cant get it to work. Needless to say i dont have much expirience with jquery.
HTML:
<select id="myselect1">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
<select id="myselect2">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
JS:
$('#myselect1').change(function(){
if ($this.value == '5'){
$('#myselect2').val('45');
}
else if ($this.value == '10'){
$('#myselect2').val('40');
}
else if ($this.value == '15'){
$('#myselect2').val('35');
}
else if ($this.value == '20'){
$('#myselect2').val('30');
}
else if ($this.value == '25'){
$('#myselect2').val('25');
}
else if ($this.value == '30'){
$('#myselect2').val('20');
}
else if ($this.value == '35'){
$('#myselect2').val('15');
}
else if ($this.value == '40'){
$('#myselect2').val('10');
}
else if ($this.value == '45'){
$('#myselect2').val('5');
}
else if ($this.value == '50'){
$('#myselect2').val('0');
}
});
$('#myselect2').change(function(){
if ($this.value == '5'){
$('#myselect1').val('45');
}
else if ($this.value == '10'){
$('#myselect1').val('40');
}
else if ($this.value == '15'){
$('#myselect1').val('35');
}
else if ($this.value == '20'){
$('#myselect1').val('30');
}
else if ($this.value == '25'){
$('#myselect1').val('25');
}
else if ($this.value == '30'){
$('#myselect1').val('20');
}
else if ($this.value == '35'){
$('#myselect1').val('15');
}
else if ($this.value == '40'){
$('#myselect1').val('10');
}
else if ($this.value == '45'){
$('#myselect1').val('5');
}
else if ($this.value == '50'){
$('#myselect1').val('0');
}
});
JS Fiddle
Your code will work if you changed
$this.value to this.value or assign this to $this (var $this = this);
However, this can be done in a very simple way
$('#myselect1, #myselect2').change(function() {
var who = this.id === 'myselect1' ? '#myselect2' : '#myselect1';
// if the ID of the changed select is #myselect1 who will be #myselect2 or vice versa.
$(who).val(50 - this.value); // change the value of the other select
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect1">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
<select id="myselect2">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
Put a listener on both select boxes, do some maths to work out what the other value needs to be and the check to see which element we need to change.
http://jsfiddle.net/qj459ntg/3/
$('select').change(function(){
var MaxValue = 50
var CurValue = $(this).val();
var NewValue = MaxValue - CurValue;
if ($(this).is('#myselect1')) {
$('#myselect2').val(NewValue);
} else {
$('#myselect1').val(NewValue);
}
});
You have two issues going on.
You need to change all your statements to like:
if ($(this).val() == '5'){
$('#myselect2').val('45');
}
$this is not a valid selector in jquery.
.value cannot be inter,mingled with a jQuery selector.
$("#select_1").change(function() {
var select_1_value = $("#select_1").val();
var select_2_value = $("#select_2").val();
var value_1 = parseInt(select_1_value);
var value_2 = parseInt(select_2_value);
var sum_values = value_1 + value_2;
if (sum_values > 50)
{
var select_2_needed = value_2 - ((value_1 + value_2) - 50);
$("#select_2").val(select_2_needed + "%");
}
});
$("#select_2").change(function() {
var select_1_value = $("#select_1").val();
var select_2_value = $("#select_2").val();
var value_1 = parseInt(select_1_value);
var value_2 = parseInt(select_2_value);
var sum_values = value_1 + value_2;
if (sum_values > 50)
{
var select_1_needed = value_1 - ((value_1 + value_2) - 50);
$("#select_1").val(select_1_needed + "%");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id = "select_1">
<option>0%</option>
<option>5%</option>
<option>10%</option>
<option>15%</option>
<option>20%</option>
<option>25%</option>
<option>30%</option>
<option>35%</option>
<option>40%</option>
<option>45%</option>
<option>50%</option>
</select>
<select id = "select_2">
<option>0%</option>
<option>5%</option>
<option>10%</option>
<option>15%</option>
<option>20%</option>
<option>25%</option>
<option>30%</option>
<option>35%</option>
<option>40%</option>
<option>45%</option>
<option>50%</option>
</select>
You will need something like this (see snippet linked with).
$('#myselect1').change(function(){ if($(this).val() < 50 ){ var value
= 50 - $(this).val(); $('#myselect2').val(value); }else if($(this).val() == 50){ $('#myselect2').val(0); } });
$('#myselect2').change(function(){ if($(this).val() < 50 ){ var value
= 50 - $(this).val(); $('#myselect1').val(value); }else if($(this).val() == 50){ $('#myselect1').val(0); } });
Hope this will help you.
Related
I Have 2 Multiple Select Field On My Code
I Want Make If All Selected Then Other Option Will Be Unselect And Disabled And Similarly If Other Any Field Selected Then All Option Will Unselect And Disabled
My Code Is
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
And
<select multiple name="country[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
By disabling an element you say i'll not use this element, I refuse to use this elemen, so disabled elements can not get Mouse Events, so disabling is wrong way.
Instead make it visually disabled.
Here is pure JS code, because i am not like jquery ;)
<style>
select {
height:300px;
width:150px;
}
</style>
<body>
<select multiple name="device[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
<select multiple name="country[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
<script>
function Go(){
parentElements = document.getElementsByTagName("select");
for(var i = 0; i < parentElements.length; i++){
parentElement = parentElements[i]
children = parentElement.childNodes;
for(var j = 0; j < children.length; j++){
childNode = children[j];
if(childNode.nodeName == "OPTION" || childNode.nodeName == "option"){
if(childNode.value == "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && k != j){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && k == j){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
if(childNode.value != "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && children[k].value == "\\'ALL\\'"){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && children[k].value != "\\'ALL\\'"){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
}
}
}
}
</script>
</body>
EDIT:
How about adding an extra button to reset the menus ?
Please check this fiddle
OLD:
If you are not holding ctrl key then other options will be deselected automatically
$(document).ready(function() {
$('#device, #country').on('change', function() {
var selectedVal = $(this).val();
for (var i = 0; i < selectedVal.length; i++) {
if (selectedVal[i] === 'ALL') {
// $("#device > option").attr('disabled','disabled');
$(this).find('option').attr('disabled', 'disabled');
$(this).find('option[value=ALL]').removeAttr('disabled');
} else {
$(this).find('option[value=ALL]').attr('disabled', 'disabled');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control">
<option value='ALL'>ALL</option>
<option value='Android'>Android</option>
<option value='iPod'>iPod</option>
<option value='iPad'>iPad</option>
<option value='Java'>Java</option>
<option value='Windows'>Windows</option>
<option value='Linux'>Linux</option>
<option value='Mac'>Mac</option>
</select>
<select multiple name="country[]" id="country" class="form-control">
<option value='ALL'>ALL</option>
<option value='BD'>Bangladesh</option>
<option value='IN'>India</option>
<option value='ID'>Indonesia</option>
<option value='NG'>Naigeria</option>
<option value='PK'>Pakistan</option>
</select>
$('#device option').click(function(){
var Allselected = $('#device :selected').text();
var AllselectedCountry = $('#country :selected').text();
if(Allselected =="ALL"){
$('#device option:not(:selected)').addClass('ashClass');
}
else if (Allselected !="ALL"){
$('#device option:first-child').css('color', '#ccc');
$('#device option:not(:selected)').removeClass('ashClass');
}
});
$('#country option').click(function(){
var AllselectedCountry = $('#country :selected').text();
if(AllselectedCountry =="ALL"){
$('#country option:not(:selected)').addClass('ashClass');
}
else if (AllselectedCountry !="ALL"){
$('#country option:first-child').css('color', '#ccc');
$('#country option:not(:selected)').removeClass('ashClass');
}
});
.ashClass {
color: #ccc;
}
.blackClass {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'Android\'>Android</option><option value=\'iPod\'>iPod</option><option value=\'iPad\'>iPad</option><option value=\'Java\'>Java</option><option value=\'Windows\'>Windows</option><option value=\'Linux\'>Linux</option><option value=\'Mac\'>Mac</option> </select>
<select multiple name="country[]" id="country" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'BD\'>Bangladesh</option><option value=\'IN\'>India</option><option value=\'ID\'>Indonesia</option><option value=\'NG\'>Naigeria</option><option
value=\'PK\'>Pakistan</option></select>
Updated the codes,Hope this one resolves your problem.
Is this what you are asking?
good afternoon from Sweden!
I have a problem with a javascript code which gives me "NaN" while trying to get it to count my points from my grades. It should check which score it is and then take what it's worth and adding that to the final score which will be alerted when pressing the button.
Javascript:
var biobetyg;
var bildbetyg;
function bBio() {
var bio = document.getElementById("bio");
var biobe = bio.options[bio.selectedIndex].value;
if ((biobe === "-") || (biobe === "f")) {
biobetyg = 0;
} else if (biobe === "e") {
biobetyg = 10;
} else if (biobe === "d") {
biobetyg = 12.5;
} else if (biobe === "c") {
biobetyg = 15;
} else if (biobe === "b") {
biobetyg = 17.5;
} else if (biobe === "a") {
biobetyg = 20;
}
}
function bBild() {
var bild = document.getElementById("bild");
var bildbe = bild.options[bild.selectedIndex].value;
if ((bildbe === "-") || (bildbe === "f")) {
bildbetyg = 0;
} else if (bildbe === "e") {
bildbetyg = 10;
} else if (bildbe === "d") {
bildbetyg = 12.5;
} else if (bildbe === "c") {
bildbetyg = 15;
} else if (bildbe === "b") {
bildbetyg = 17.5;
} else if (bildbe === "a") {
bildbetyg = 20;
}
}
var merit = bildbetyg + biobetyg;
function GetSelectedItem() {
var strSel = "The Value is: " + merit + " and text is: ";
alert(strSel);
}
HTML:
<form>
<h1>Bild</h1>
<h2>Välj ditt betyg i bild:</h2>
<select id="bild" onchange="bBild()">
<option class="f" value="-">-</option>
<option class="f" value="f">F</option>
<option class="go" value="e" selected>E</option>
<option class="go" value="d">D</option>
<option class="go" value="c">C</option>
<option class="go" value="b">B</option>
<option class="go" value="a">A</option>
</select>
<select id="bio" onchange="bBio()">
<option class="f" value="-">-</option>
<option class="f" value="f">F</option>
<option class="go" value="e" selected>E</option>
<option class="go" value="d">D</option>
<option class="go" value="c">C</option>
<option class="go" value="b">B</option>
<option class="go" value="a">A</option>
</select>
<input type="button" value="Press to Confirm" onClick="GetSelectedItem();">
</form>
As Pointy pointed out, I suggest changing your html to:
<form>
<h1>Bild</h1>
<h2>Välj ditt betyg i bild:</h2>
<select id="bild" onchange="bBild()">
<option class="f" value="0">-</option>
<option class="f" value="0">F</option>
<option class="go" value="10" selected>E</option>
<option class="go" value="12.5">D</option>
<option class="go" value="15">C</option>
<option class="go" value="17.5">B</option>
<option class="go" value="20">A</option>
</select>
<select id="bio" onchange="bBio()">
<option class="f" value="0">-</option>
<option class="f" value="0">F</option>
<option class="go" value="10" selected>E</option>
<option class="go" value="12.5">D</option>
<option class="go" value="15">C</option>
<option class="go" value="17.5">B</option>
<option class="go" value="20">A</option>
</select>
<input type="button" value="Press to Confirm" onClick="GetSelectedItem();">
</form>
So you can avoid the need of the ifs (or even using switch() which would be a better option, and then you can change your JavaScript to (the parseFloat() parts are to avoid treating the values as strings, as that would only concatenate instead of adding up the numbers):
function bBio()
{
var bio = document.getElementById("bio");
var biobetyg = parseFloat(bio.options[bio.selectedIndex].value);
return biobetyg;
}
function bBild()
{
var bild = document.getElementById("bild");
var bildbetyg = parseFloat(bild.options[bild.selectedIndex].value);
return bildbetyg;
}
function GetSelectedItem()
{
var merit = bBio() + bBild();
var strSel = "The Value is: " + merit + " and text is: ";
alert(strSel);
}
This greatly reduces your JS code and I think it's more readable... (besides actually working
WORKING DEMO
The problem is that this line:
var merit = bildbetyg + biobetyg;
sets the variable "merit" before either of those two functions runs. It is not recomputed automatically just because the other two variables change.
Move that line of code inside the "GetSelectedItem" function and things should work much better.
You'll also need to initialize the two variables so that if the button is clicked before the values change, it still works. In fact you could have that "GetSelectedItem" function simply call the two functions itself before computing the sum.
I want to validate my value, but doesnt quite work if someone could help me out
function countrySelectChanged() {
$('.sub-menu').hide();
var selectedCountry = $('#country-select').val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
}
$(document).ready(function() {
$('#country-select').change(countrySelectChanged);
countrySelectChanged();
var valid;
$('#click').click(function(){
if ($("#us-select").val() =="" || $("#germany-select").val() =="" ){
valid = false;
} else {
valid = true;
}
if (!(valid)) {
$('#msg').html('NOt Passed')
} else {
$('#msg').html('Pass')
}
});
});
Here is HTML
<select id="country-select">
<option value="none" >---</option>
<option value="us" >US</option>
<option value="germany">Germany</option>
</select>
<select id="us-select" class="sub-menu hide">
<option value="none" >---</option>
<option value="austin" >Austin</option>
<option value="austin2" >Austin2</option>
</select>
<select id="germany-select" class="sub-menu hide">
<option value="none" >---</option>
<option value="berlin">Berlin</option>
<option value="berlin2">Berlin2</option>
</select>
<select id="none-select" class="sub-menu hide">
<option value="none" >---</option>
</select>
click me
<div id="msg"></div>
This is online version
http://jsfiddle.net/RPWPZ/14/
Working Demo http://jsfiddle.net/SJ7Sg/ or http://jsfiddle.net/95zXa/
To get the selcted option you need to do this $("#us-select option:selected").val()
API => http://api.jquery.com/selected-selector/
Rest it should fit the cause :)
code
function countrySelectChanged() {
$('.sub-menu').hide();
var selectedCountry = $('#country-select').val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
}
$(document).ready(function() {
$('#country-select').change(countrySelectChanged);
countrySelectChanged();
var valid;
$('#click').click(function(){
if ($("#us-select option:selected").val() =="none"){
valid = false;
}else{
valid = true;
}
if (valid) {
$('#msg').html('Success')
return false;
} else {
$('#msg').html('Fail')
}
});
});
if ($('#country-select').val() =="us") {
valid = false;
} else
you must change
$("#us-select").val() =="" || $("#germany-select").val() ==""
with
$("#us-select").val() =="none" || $("#germany-select").val() =="none"
because your default value of select is "none" ->
<select id="country-select">
<option **value="none"** >---</option>
<option value="us" >US</option>
<option value="germany">Germany</option>
</select>
is it possible to change the limit the value of the dropdown2 when the dropdown1 changes?
here is my code
<!--DROPDOWN 1-->
<p class="">From</p>
<select name="From" id="From" onChange="displayVal(this)">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
<option value="30000">£30,000</option>
<option value="40000">£40,000</option>
<option value="50000">£50,000</option>
<option value="60000">£60,000</option>
<option value="70000">£70,000</option>
<option value="80000">£80,000</option>
<option value="90000">£90,000</option>
<option value="100000">£100,000</option>
<option value="110000">£110,000</option>
<option value="120000">£120,000</option>
<option value="130000">£130,000</option>
<option value="140000">£140,000</option>
<option value="150000">£150,000</option>
<option value="150001">£150,000+</option>
</select>
<!--DROPDOWN 2-->
<p class="">To</p>
<select name="To" id="To">
<option value="any">Any</option>
<option value="none">None</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
<option value="30000">£30,000</option>
<option value="40000">£40,000</option>
<option value="50000">£50,000</option>
<option value="60000">£60,000</option>
<option value="70000">£70,000</option>
<option value="80000">£80,000</option>
<option value="90000">£90,000</option>
<option value="100000">£100,000</option>
<option value="110000">£110,000</option>
<option value="120000">£120,000</option>
<option value="130000">£130,000</option>
<option value="140000">£140,000</option>
<option value="150000">£150,000</option>
<option value="150001">£150,000+</option>
</select>
I want is when I change dropdown1 to none the dropdown2 option will only show none and no other more.
And I also want is if I change the value of dropdown1 to an amount, for example 30000, dropdown2 will show only the values that are greater that 30000 including the option any.
Is there a way to do this in javascript or jQuery?
sorry. I'm new at javascript and jQuery.. Thank you in advance!
Demo: http://jsfiddle.net/LsaLA/1/
Code:
function setTo() {
var f = $('#From').val();
var t = $('#To');
t.children().hide();
if( f == 'none' ) {
t.children('[value="none"]').show();
t.val('none');
}
else if( t == 'any' ) {
t.children().show();
t.val('any');
}
else {
f = parseInt(f, 10);
t.children().each(function() {
if( $(this).val() == 'any' ) {
$(this).show();
t.val('any');
}
else {
var v = parseInt($(this).val(), 10);
if(!isNaN(v) && v >= f) {
$(this).show();
}
}
});
t.val('any');
}
}
$('#From').change(setTo);
//call it on load as well
setTo();
try this: http://jsfiddle.net/F6xnL/4/
$("#From").change(function() {
$("#To").attr("disabled", false).children().each(function() {
$(this).attr('disabled', false);
});
if ($(this).val() === 'any') return;
if ($(this).val() === 'none') {
$("#To").val("none").attr("disabled", true);
return;
}
var pound = parseInt($(this).val());
$("#To").children().each(function() {
var val = $(this).val();
if (val === 'none' || val === 'any') {
$(this).attr('disabled', true); return;
}
if (parseInt($(this).val()) <= pound) {
$(this).attr('disabled', true);
}
});
});
$('#From').change(function(){
if($(this).val() == 'none'){
$('#To').prop('disabled', true);
}else if((true == $('#To').prop('disabled')) && ($(this).val() != 'none')){
$('#To').prop('disabled', false);
}
$('#To option').each(function(){
if($(this).val() < $('#From').val()){
$(this).hide(0);
}else{
if($(this).css('display') == 'none'){
$(this).show(0);
}
}
});
});
Untested, but this should work. I'm a bit verbose.
I have 3 dropdown boxes, in which there are values of 10 to 100. I want user to select cumulative value of 100 from all dropdown boxes.
Which means, if I select 20 from the first dropdown box the next 2 dropdown should be left with the options of selecting total of 100
What I have done so far is here: CHECK IT HERE (JS FIDDLE)
HTML
<select id="foreign" class="me">
<option value="">Foreign Policy</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<select id="economy" class="me">
<option value="">Economy Policy</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<select id="social" class="me">
<option value="">Social Policy</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<br />
<span id="message"></span>
JavaScript
/*var total = new Array();
$('#foreign option').each(function() {
total.push($(this).val());
});
console.log(total);*/
var total = 100;
var ids = ['foreign', 'social', 'economy'];
var current_selected;
$('.me').change(function() {
current_selected = $(this).attr('id');
var socval = $('#' + current_selected + ' option:selected').val();
total = total - socval;
if ($.inArray($(this).attr('id'), ids) > -1) {
ids.splice($.inArray($(this).attr('id'), ids), 1);
}
for (var i = 0; i < ids.length; i++) {
$('#' + ids[i] + ' option').each(function() {
if ($(this).val() >= total) {
$(this).attr('disabled', true);
} else {
$(this).attr('disabled', false);
}
});
}
if (total <= 0) {
total = 100;
}
console.log(total);
ids.push(current_selected);
});
It is pretty much working, with some minor faults.
UPDATE
I think I solved it.
SOLVED FIDDLE
Thanks who helped.
Regards
Changing:
if ($(this).val() >= total) {
to
if ($(this).val() > total) {
solves the problem of only being able to select upto 90%
Working sample
Update
With regard to changing values, i'd probably take a forward-looking approach and reset the value of the forward selects. Something like:
var selectIds = ['first', 'second', 'third']
$('select').change(function(){
var currentIndex = $.inArray($(this).attr('id'), selectIds);
for(var i = currentIndex + 1; i < selectIds.length; i++)
{
$('#' + selectIds[i]).val("0");
}
});
This basically resets the value of select items in the chain that are further ahead than the current select box being used.
Working example
You'll also want to look ahead when doing the disables. You should only be disabling items in the select lists further down the chain from the current select. The first select list should always be able to choose any value and the following selects filtered based on that. This fits in well with the above approach.
I did another version of your code, plus fixing the bug
http://jsfiddle.net/rzBej/62/
$('.me').change(function() {
var totalSoFar = 0;
$('.me').each(function() {
totalSoFar += +$(this).val();
});
var tmp = 100 - totalSoFar;
$('.me').each(function() {
var $this = $(this);
$this.find('option').each(function() {
$this.prop('disabled', $this.attr('value') > tmp);
});
})
});