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

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

<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>

Related

Input field doesn't appear after changing the selection field

Once the user selects 'Cancelled' in the drop-down menu, the input field should appear to the user, so that the user can enter their reason for cancellation.
But it's not working.
By default, the input field is disabled, and doesn't appear to the user.
I tried to use onselect but to no avail.
HTML
<div>
<select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" disabled>
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
once the user clicks on cancelled the input field disabled here should just be abled and appear for the user to enter

I think you missed the onchange function what happens when you change the select. Modify the onselect function to onchange function and add opacity:0 into input style and make it disabled initially.
function closeReasonAction() {
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus" >
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px; opacity:0" disabled />
</div>

You have missed your onchange function.
function func(){
if (document.getElementById('changeStatus').value != "Cancelled")
{
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
func()
<div>
<select placeholder="Status?" onselect="closeReasonAction" name="changeStatus" id="changeStatus" onchange="func()">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

You have to remove disabled from the select element, and place disabled on the closeReason element, otherwise users will not be able to interact with this element.
You need to add opacity: 0 to the closeReason element, otherwise it will be visible when the page loads.
You need to change onselect to onchange. onselect can only be used for <input type='text'> and <textarea> in forms.
You need to add () to the end of onchange=closeReasonAction so that it becomes onchange=closeReasonAction() since you are trying to call a function on its change event.
You actually need to wrap your JS code in a function called closeReasonAction, otherwise you're trying to call a non-existent function.
Example
function closeReasonAction(){
if (document.getElementById('changeStatus').value != "Cancelled") {
document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
}
else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px; opacity: 0;" disabled>
</div>

The if condition should be inside a function and the function should be called on change event of the select box
function closeReasonAction() {
if (document.getElementById('changeStatus').value != "Cancelled") {
//document.getElementById("closeReason").style.opacity = 0;
document.getElementById("closeReason").disabled = true;
} else if (document.getElementById('changeStatus').value == "Cancelled") {
document.getElementById("closeReason").style.opacity = 1;
document.getElementById("closeReason").disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction()" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

You should change onselect with onchange:
function closeReasonAction($el) {
var $reason = document.getElementById("closeReason");
if ($el.value != "Cancelled") {
$reason.disabled = true;
} else if ($el.value == "Cancelled") {
$reason.style.opacity = 1;
$reason.disabled = false;
}
}
<div>
<select placeholder="Status?" onchange="closeReasonAction(this)" name="changeStatus" id="changeStatus">
<option value="Pending">Pending</option>
<option value="Quoted">Quoted</option>
<option value="Cancelled">Cancelled</option>
<option value="Confirmed">Confirmed</option>
</select>
<input name="closeReason" type="RRField" id="closeReason" style="margin:4px; padding:2px;">
</div>

You should use the onchange function, rather than onclick on each individual option.
Use a value attribute on each option to store the data, and use an instance of this to assign the change (or event.target)
You have no ID on your text field
You're missing the end quote for your onclick function
<select name="" onchange="myFunction(event)">
<option disabled selected>Choose Database Type</option>
<option value="Green">green</option>
<option value="Red">red</option>
<option value="Orange">orange</option>
<option value="Black">black</option>
</select>
And the function:
function myFunction(e) {
document.getElementById("myText").value = e.target.value
}

Multiple Select Unselect And Disabled

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?

Dynamically Generating Text from Selected Options

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

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.

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

Related

Input field doesn't appear after changing the selection field

Multiple Select Unselect And Disabled

Dynamically Generating Text from Selected Options

simple jQuery validation failed

onChange event on two select option

Categories

Resources