Dynamically Generating Text from Selected Options

Dynamically Generating Text from Selected Options - javascript

http://jsbin.com/edOJurI/1/edit
Option one works as intended, but my second option doesn't seem to be working, and confused as to why it's not.
Any help is much appreciated.
JavaScript:
$(window).load(function() {
var enabled = true;
function calculation(e) {
// Colors
$("select#colors").each(function() {
if ($(this).val() === 'Black') {
enabled = true;
$('span#1').text('0');
}
if ($(this).val() === 'Brown') {
enabled = true;
$('span#1').text('1');
}
if ($(this).val() === 'Red') {
enabled = true;
$('span#1').text('2');
}
if ($(this).val() === 'Orange') {
enabled = true;
$('span#1').text('3');
}
if ($(this).val() === 'Yellow') {
enabled = true;
$('span#1').text('4');
}
if ($(this).val() === 'Green') {
enabled = true;
$('span#1').text('5');
}
if ($(this).val() === 'Blue') {
enabled = true;
$('span#1').text('6');
}
if ($(this).val() === 'Violet') {
enabled = true;
$('span#1').text('7');
}
if ($(this).val() === 'Grey') {
enabled = true;
$('span#1').text('8');
}
if ($(this).val() === 'White') {
enabled = true;
$('span#1').text('9');
}
return false;
});
$("select#digits").each(function() {
if ($(this).val() === 'Black') {
enabled = true;
$('span#2').text('0');
}
if ($(this).val() === 'Brown') {
enabled = true;
$('span#2').text('1');
}
if ($(this).val() === 'Red') {
enabled = true;
$('span#2').text('2');
}
if ($(this).val() === 'Orange') {
enabled = true;
$('span#2').text('3');
}
if ($(this).val() === 'Yellow') {
enabled = true;
$('span#2').text('4');
}
if ($(this).val() === 'Green') {
enabled = true;
$('span#2').text('5');
}
if ($(this).val() === 'Blue') {
enabled = true;
$('span#2').text('6');
}
if ($(this).val() === 'Violet') {
enabled = true;
$('span#2').text('7');
}
if ($(this).val() === 'Grey') {
enabled = true;
$('span#2').text('8');
}
if ($(this).val() === 'White') {
enabled = true;
$('span#2').text('9');
}
return false;
});
}
$(document).ready(function(e) {
calculation(e);
});
$(document).change(function(e) {
calculation(e);
});
});

I made some changes in your code so that it even simpler
HTML
<th>
<select id="colors">
<option value="" required>1st Band</option>
<option style="background:black; color:white;" value="0">Black</option>
<option style="background:brown; color:white;" value="1">Brown</option>
<option style="background:red; color:white;" value="2">Red</option>
<option style="background:orange; color:white;" value="3">Orange</option>
<option style="background:yellow; color:black;" value="4">Yellow</option>
<option style="background:green; color:white;" value="5">Green</option>
<option style="background:blue; color:white;" value="6">Blue</option>
<option style="background:violet; color:black;" value="7">Violet</option>
<option style="background:grey; color:white;" value="8">Grey</option>
<option style="background:white; color:black;" value="9">White</option>
</select>
</th>
<th>
<select id="digits">
<option value="" required>2nd Band</option>
<option style="background:black; color:white;" value="0">Black</option>
<option style="background:brown; color:white;" value="1">Brown</option>
<option style="background:red; color:white;" value="2">Red</option>
<option style="background:orange; color:white;" value="3">Orange</option>
<option style="background:yellow; color:black;" value="4">Yellow</option>
<option style="background:green; color:white;" value="5">Green</option>
<option style="background:blue; color:white;" value="6">Blue</option>
<option style="background:violet; color:black;" value="7">Violet</option>
<option style="background:grey; color:white;" value="8">Grey</option>
<option style="background:white; color:black;" value="9">White</option>
</select>
</th>
JAVASCRIPT
function calculation() {
// Colors
$("select#colors").each(function() {
var color = $(this).val();
if(!color)
return;
$('span#1').text(color);
});
$("select#digits").each(function() {
var color = $(this).val();
if(!color)
return;
$('span#2').text(color);
});
}
$(document).ready(function() {
calculation();
});
$(document).change(function(){
calculation();
});

You added the id="digits" to your <option> under the <select>.
<select>
<option id="digits">2nd Band</option>
should be
<select id="digits">
<option>2nd Band</option>

Change
<select>
<option id="digits">2nd Band</option>
to:
<select id="digits">
<option>2nd Band</option>

You can simplify your code very very much if you change your HTML structure a bit like.
<select id="colors">
<option>1st Band</option>
<option style="background:black; color:white;" value="0">Black</option>
<option style="background:brown; color:white;" value="1">Brown</option>
...........
notice the value in "option" tag (0,1,2...)
and then in js:
$("select#colors").each(function() {
$('span#1').text($(this).val());
});
Just see a working demo here:
http://jsbin.com/edOJurI/5/edit

Related

JS should select the second option where we have used selected="selected"

<select class="some_flex_select">
<option value="con_1">One</option>
<option value="con_2" selected="selected">Two</option>
<option value="con_3">Three</option>
</select>
JS →
select.addEventListener('change', function (event) {
if (event.target.value === 'con_2') {
classTwo.classList.add('class_2')
}else if (event.target.value === 'con_3') {
classTwo.classList.add('class_3')
}else if (event.target.value === 'con_1') {
classTwo.classList.remove('class_3', 'class_2')
}
})
// Do the check initially...
checkSelect()
// ... and on change events
select.addEventListener('change', checkSelect)
My expectations are that the default is con_2, and the JS should implement that class by default, but that is not happening.

This will work. I have tested this here →
https://codepen.io/codeispoetry/pen/jKzqrx
var select = document.querySelector('select') // use more specific selector here
var classTwo = document.querySelector('.flex_parent')
function checkSelect () {
if (select.value === 'con_2') {
classTwo.classList.add('flex_parent_2')
}else if (select.value === 'con_3') {
classTwo.classList.add('flex_parent_3')
}else if (select.value === 'con_1') {
classTwo.classList.remove('flex_parent_3', 'flex_parent_2')
}
}
checkSelect();
select.addEventListener('change', checkSelect)
.flex_parent {color: blue; font-size: 25px; font-weight: bold}
.flex_parent_2 {color: red; font-size: 25px;}
.flex_parent_3 {color: green; font-size: 25px;}
<select class="video_home_flex_select">
<option value="con_1">Blue </option>
<option value="con_2" selected="selected">Red</option>
<option value="con_3">Green</option>
</select>
<div class="flex_parent">
Hey I am changing color!
</div>

Try This:-
$('select').on('change', function() {
if (this.value === 'con_2') {
classTwo.classList.add('class_2')
}else if (this.value === 'con_3') {
classTwo.classList.add('class_3')
}else if (this.value === 'con_1') {
classTwo.classList.remove('class_3', 'class_2')
}
alert( this.value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="video_home_flex_select">
<option value="con_1">One</option>
<option value="con_2" selected="selected">Two</option>
<option value="con_3">Three</option>
</select>

<select class="some_flex_select" onchange="checkSelect(this.value)">
<option id="con_1" value="con_1">One</option>
<option id="con_2" value="con_2" >Two</option>
<option id="con_3" value="con_3">Three</option>
</select>
<script type="text/javascript">
var defult_id='con_2';
document.getElementById(defult_id).selected = "true";
function checkSelect(selected){
if (selected === 'con_2') {
//add class
//classTwo.classList.add('class_2');
}else if (selected === 'con_3') {
//classTwo.classList.add('class_3');
}else if (selected === 'con_1') {
//classTwo.classList.remove('class_3', 'class_2');
}
}
</script>

Here's what you're looking for-
myselect = document.getElementById("myselect");
function checkSelect(event) {
var option = myselect.options[myselect.selectedIndex].value;
switch (option) {
case "con_2":
alert("con_2 selected");
//classTwo.classList.add('class_2');
break;
case "con_3":
alert("con_3 selected");
//classTwo.classList.add('class_3');
break;
case "con_1":
alert("con_1 selected");
//classTwo.classList.remove('class_3', 'class_2');
break;
default:
break;
}
}
// Do the check initially...
checkSelect()
// ... and on change events
myselect.addEventListener('change', checkSelect)
<select id="myselect" class="video_home_flex_select">
<option value="con_1">One</option>
<option value="con_2" selected>Two</option>
<option value="con_3">Three</option>
</select>

Disabling select options within modal window based on previous select options being disabled?

I have multiple select dropdown in a modal window that prepopulates based on identical select dropdowns on the main page (I am using Foundation 4). On both dropdown menus, there is a certain combination that the user cannot pick. I have all this working, except when the modal window comes up the user can make an illegal selection at first, unless they change the option and then try to change it again. I need it to make the illegal option greyed out when the modal window pops up, and not after they change the selection on the modal window like I have it now. Can anyone help me?
Here is the HTML:
<!-- THE ON-PAGE DROPDOWN -->
<div id="choose">
<h1><strong>Choose your FREE bag of Coffee</strong></h1>
<!--START BLENDS-->
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="blend1" id="blend1">
<option value="">Choose Blend</option>
<option value="">—————</option>
<option value="1"> Light</option>
<option value="2">Medium</option>
<option value="3">Dark</option>
<option value="4">Robust</option>
<option value="5">French Vanilla</option>
<option value="6">Caramel Vanilla</option>
<option value="7">Hazelnut & Cinnamon</option>
<option value="8">Passionata — Chocolate Truffles</option>
</select>
</div>
</div>
<!--END BLENDS-->
<fieldset>
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="grind1" id="grind1">
<option value="">Choose Grind</option>
<option value="">—————</option>
<option value="1">Ground</option>
<option value="2">Whole Bean</option>
</select>
</div>
</div>
<div class="clearfix"></div>
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="type1" id="type1">
<option value="">Choose Type</option>
<option value="">—————</option>
<option value="1">Regular</option>
<option value="2">Decaf</option>
</select>
</div>
</div>
</fieldset>
</div>
<!-- END OF MAIN PAGE DROPDOWN -->
<!-- MODAL WINDOW HTML -->
<div class="choice" >
<select name="blend2" id="blend2">
<option value="">Choose Blend</option>
<option value="">—————</option>
<option value="1">Light</option>
<option value="2">Medium</option>
<option value="3">Dark</option>
<option value="4">Robust</option>
<option value="5">French Vanilla</option>
<option value="6">Caramel Vanilla</option>
<option value="7">Hazelnut & Cinnamon</option>
<option value="8">Chocolate Truffles</option>
</select>
</div>
<div class="choice2">
<select name="grind2" id="grind2">
<option value="">Choose Grind</option>
<option value="">—————</option>
<option value="1">Ground</option>
<option value="2">Whole Bean</option>
</select>
<select name="type2" id="type2">
<option value="">Choose Type</option>
<option value="">—————</option>
<option value="1">Regular</option>
<option value="2">Decaf</option>
</select>
</div>
Here is the JS/jQuery:
<script>
$("#blend1").change(function () {
if ($(this).val() == "1") {
$("#blend2").val("1");
}
if ($(this).val() == "2") {
$("#blend2").val("2");
}
if ($(this).val() == "3") {
$("#blend2").val("3");
}
if ($(this).val() == "4") {
$("#blend2").val("4");
}
if ($(this).val() == "5") {
$("#blend2").val("5");
}
if ($(this).val() == "6") {
$("#blend2").val("6");
}
if ($(this).val() == "7") {
$("#blend2").val("7");
}
if ($(this).val() == "8") {
$("#blend2").val("8");
}
});
$("#grind1").change(function () {
if ($(this).val() == "1") {
$("#grind2").val("1");
}
if ($(this).val() == "2") {
$("#grind2").val("2");
}
});
$("#type1").change(function () {
if ($(this).val() == "1") {
$("#type2").val("1");
}
if ($(this).val() == "2") {
$("#type2").val("2");
}
});
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("select[name='grind1']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='type1'] option[value=2]").attr('disabled', true);
} else {
$("select[name='type1'] option[value=2]").attr('disabled', false);
}
});
$("select[name='type1']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='grind1'] option[value=2]").attr('disabled', true);
} else {
$("select[name='grind1'] option[value=2]").attr('disabled', false);
}
});
});
</script>
<!-- NO BONUS UPSELL -->
<script language="javascript" type="text/javascript">
$.noConflict();
$(document).ready(function() {
$("select[name='grind2']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='type2'] option[value=2]").attr('disabled', true);
} else {
$("select[name='type2'] option[value=2]").attr('disabled', false);
}
});
$("select[name='type2']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='grind2'] option[value=2]").attr('disabled', true);
} else {
$("select[name='grind2'] option[value=2]").attr('disabled', false);
}
});
});
</script>
If anyone could help me, that would be fantastic!

Controlling combined value of two select inputs with jquery

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.

simple jQuery validation failed

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>

onChange event on two select option

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.

Develop Reference

JavaScript is the programming language of the Web.

Dynamically Generating Text from Selected Options - javascript

You added the id="digits" to your <option> under the <select>. <select> <option id="digits">2nd Band</option> should be <select id="digits"> <option>2nd Band</option>

Change <select> <option id="digits">2nd Band</option> to: <select id="digits"> <option>2nd Band</option>

Related

JS should select the second option where we have used selected="selected"

Disabling select options within modal window based on previous select options being disabled?

Controlling combined value of two select inputs with jquery

simple jQuery validation failed

onChange event on two select option

Categories

Resources