How to apply a css depending on value on js - javascript

I need to change a color depending on value of id="total".
If value is <96%: Color must be red. If value >= 96% < 97%: Color must be yellow. If value is >= 97%: Color must be green. Thank You.
function arredondaTudo() {
var valorOne = parseInt(document.getElementById("campoOne").value)
var valorTwo = parseInt(document.getElementById("campoTwo").value)
var valorThree = parseInt(document.getElementById("campoThree").value)
if (isNaN(valorOne))
valorUm = 0
if (isNaN(valorTwo))
valorDois = 0
if (isNaN(valorThree))
valorTres = 0
var Arredondamento = ((valorThree - valorTwo) / valorThree * 100);
document.getElementById("total").innerHTML = (Arredondamento).toFixed(2);
}
$(document).ready(function() {
$("#campoOne").change(function() {
var val = $(this).val();
if (val == "clma") {
$("#campoThree").html("<option value='250'>25</option><option value='260'>26</option><option value='270'>27</option><option value='280'>28</option><option value='290'>29</option><option value='300'>30</option><option value='310'>31</option>");
$("#campoTwo").html("<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><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>");
document.getElementById("total").innerHTML = "100";
}
});
});
$(document).ready(function() {
$("#campoThree").change(function() {
var val = $(this).val();
if (val == "250") {
$("#campoTwo").html("<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><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option>");
document.getElementById("total").innerHTML = "100";
} else if (val == "260") {
$("#campoTwo").html("<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><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option>");
document.getElementById("total").innerHTML = "100";
} else if (val == "270") {
$("#campoTwo").html("<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><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option>");
document.getElementById("total").innerHTML = "100";
} else if (val == "280") {
$("#campoTwo").html("<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><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option>");
document.getElementById("total").innerHTML = "100";
} else if (val == "290") {
$("#campoTwo").html("<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><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option>");
document.getElementById("total").innerHTML = "100";
} else if (val == "300") {
$("#campoTwo").html("<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><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option>");
document.getElementById("total").innerHTML = "100";
} else if (val == "310") {
$("#campoTwo").html("<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><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option><option value='14'>14</option><option value='15'>15</option>");
document.getElementById("total").innerHTML = "100";
}
});
});
.green {
background-color: #90EE90;
}
<div id="two">
<table>
<tr>
<td class="yellow">Escova</td>
<td class="yellow">
<select onchange="arredondaTudo()" type="text" name="campoOne" id="campoOne">
<option value="clma">Classic Macia</option>
<var id="valorOne"></var>
</td>
</tr>
<tr>
<td class="yellow">Quantidade de fios</td>
<td class="yellow">
<select onchange="arredondaTudo()" type="text" name="campoThree" id="campoThree" value="">
<option value="250">25</option>
<option value="260">26</option>
<option value="270">27</option>
<option value="280">28</option>
<option value="290">29</option>
<option value="300">30</option>
<option value="310">31</option>
<var id="valorThree"></var>
</td>
</tr>
<tr>
<td class="yellow">Defeitos</td>
<td class="yellow">
<select onchange="arredondaTudo()" type="text" name="campoTwo" id="campoTwo" maxlength="2" value="0"><button onclick="arredondaTudo()"> ✅</button>
<option value="0" selected>0</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<var id="valorTwo"></var>
</td>
</tr>
<tr>
<td class="gray">Porcentagem</td>
<td class="green">
<div><span id="total">100</span>%</div>
</td>
</tr>
</table>
</div>

Maybe this code example helps you:
(I am using the onChange method you created and check which color to select, based on the current content (.textContent) of the #total field. Then I am using .style.setProperty(css-property, css-value) to change the color)
window.onload = function() {
arredondaTudo();
};
function arredondaTudo() {
// Update value based of selected option
const selector = document.getElementById("selector");
const selectedValue = selector.options[selector.selectedIndex].value;
document.getElementById("total").textContent = selectedValue + "%";
// Update color based on value
const total = document.getElementById("total").textContent;
const percentage = parseFloat(total.replace('%',''));
if (percentage < 96) {
document.getElementById("total-container").style.setProperty("background-color", "red");
} else if (percentage < 97) {
document.getElementById("total-container").style.setProperty("background-color", "yellow");
} else {
document.getElementById("total-container").style.setProperty("background-color", "green");
}
}
#total-container {
display: inline-block;
margin-top: 1em;
background-color: gray;
}
#total-container #total {
margin: 5px 10px;
color: black;
font-weight: 900;
}
<html>
<head>
</head>
<body>
<select onchange="arredondaTudo()" type="text" value="" id="selector">
<option value="93.4">Option 1</option>
<option value="96.5">Option 2</option>
<option value="98.9">Option 3</option>
</select>
<br>
<div id="total-container">
<p id="total">85.3%</p>
<div>
</body>
</html>

Related

conditional table: only first condition is being executed the other 2 simply remain blank

I am a beginner, I need to know what I am doing wrong. I am trying to create a conditional table where after selection of option a number will be generated in last row. but only first condition is being executed the other 2 simply remain blank. This is just a part of code where the rows will be added with different parameters.
<!DOCTYPE html>
<html>
<head>
<title>SKU generator</title>
</head>
<body>
<h1>Contact Lens</h1>
<p>
<table style="width:100%">
<tr>
<td>TYPE</td>
<td>
<select id="type">
<option value="">--Make a choice--</option>
<option value="full">Full</option>
<option value="half">Half</option>
<option value="rimless">Rimless</option>
</select>
</td>
<td>
<p id="demo1"></p>
<script>
const select = document.querySelector('select');
var typ;
select.onchange = settype;
function settype() {
const choice = select.value;
if (choice === 'full') {
typ = '0';
} else if (choice === 'half') {
typ = '1';
} else if (choice === 'rimless') {
typ = '2';
} else {
typ = '';
}
document.getElementById("demo1").innerHTML = typ;
}
</script>
</td>
</tr>
<tr>
<td>GENDER</td>
<td>
<select id="gender">
<option value="">--Make a choice--</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="unisex">Unisex</option>
<option value="kids">Kids</option>
</select>
</td>
<td>
<p id="demo2"></p>
<script>
const select = document.querySelector('select');
var gen;
select.onchange = setgender;
function setgender() {
const choice = select.value;
if (choice === 'male') {
gen = '0';
} else if (choice === 'female') {
gen = '1';
} else if (choice2 === 'unisex') {
gen = '2';
} else if (choice2 === 'kids') {
gen = '3';
} else {
gen = '';
}
document.getElementById("demo2").innerHTML = gen;
}
</script>
</td>
</tr>
</table>
</p>
</body>
</html>
you can mention it like this let const = document.querySelector('#select'); --if id
or let const = document.getElementById('select');
The problem is how you are finding the select
const select = document.querySelector('select');
In both scripts, you are referring to the same select.
Try to use id
const typeSelect = document.querySelector('#type');
const genderSelect = document.querySelector('#gender');
Off Topic: Why are you doing this with JS in the first place? Why not set these values directly as the value-attibute? Like this:
<select id="type">
<option value="">--Make a choice--</option>
<option value="0">Full</option>
<option value="1">Half</option>
<option value="2">Rimless</option>
</select>
<select id="gender">
<option value="">--Make a choice--</option>
<option value="0">Male</option>
<option value="1">Female</option>
<option value="2">Unisex</option>
<option value="3">Kids</option>
</select>
I assume the document.getElementById("demo1").innerHTML = typ; lines are more for logging/debugging puposes.
You can use getElementById to fetch the select, as you are assigning id to the select.
<h1>Contact Lens</h1>
<p>
<table style="width:100%">
<tr>
<td>TYPE</td>
<td>
<select id="type">
<option value="">--Make a choice--</option>
<option value="full">Full</option>
<option value="half">Half</option>
<option value="rimless">Rimless</option>
</select>
</td>
<td>
<p id="demo1"></p>
<script>
const select = document.getElementById('type');
var typ;
select.onchange = settype;
function settype() {
const choice = select.value;
if(choice === 'full') {
typ = '0';
} else if(choice === 'half') {
typ = '1';
} else if(choice === 'rimless') {
typ = '2';
} else {
typ = '';
}
document.getElementById("demo1").innerHTML = typ;
}
</script>
</td>
</tr>
<tr>
<td>GENDER</td>
<td>
<select id="gender">
<option value="">--Make a choice--</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="unisex">Unisex</option>
<option value="kids">Kids</option>
</select>
</td>
<td>
<p id="demo2"></p>
<script>
const select1 = document.getElementById('gender');
var gen;
select1.onchange = setgender;
function setgender() {
const choice = select1.value;
if(choice === 'male') {
gen = '0';
} else if(choice === 'female') {
gen = '1';
} else if(choice === 'unisex') {
gen = '2';
} else if(choice === 'kids') {
gen = '3';
} else {
gen = '';
}
console.log(gen)
document.getElementById("demo2").innerHTML = gen;
}
</script>
</td>
</tr>
</table>
</p>

How to select a selectbox an option value with JS?

This may sound easy but I'm been having a heck of a time to get this to work. Somebody please help. My select box is like below. How do i select the value 3 from the list?
if(!empty($listeDoc))
{
$iGroups = 0;
while($iGroups < count($listeDoc))
{
?>
<tr>
<td>
<input type="checkbox" name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['product_id']" id="productSelectCreation_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" onchange="setValueToOne(this)" ><?php echo $listeDoc[$iGroups]->DOC_CLIENT_NOM; ?>
</td>
<td>
<select name="productSelect[<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>]['quantity']" id="productQty_<?php echo $listeDoc[$iGroups]->DOC_CLIENT_ID ?>" class="form-control1" value="<?php echo $qty; ?>" style="width:100%; height:25px; border : #62270c solid 1px;" tabindex="1">
<option value=""/></option>
<option value="1"<?php if ($qty == 1) echo 'selected="selected"'; ?>>1</option>
<option value="2"<?php if ($qty == 2) echo 'selected="selected"'; ?>>2</option>
<option value="3"<?php if ($qty == 3) echo 'selected="selected"'; ?>>3</option>
<option value="4"<?php if ($qty == 4) echo 'selected="selected"'; ?>>4</option>
<option value="5"<?php if ($qty == 5) echo 'selected="selected"'; ?>>5</option>
</select>
<td>
</tr>
<?php
$iGroups++;
}
}
here's is what i tried:
function setValueToOne(value)
{
checkbox = document.getElementById('productSelectCreation');
if (checkbox.checked == true)
{
document.getElementById("productQtyCreation").value = 1;
}
else
document.getElementById("productQtyCreation").value = '0';
}
If I understand correctly you want to change the select box selected option using vanilla javascript. You will need to loop the selectbox and compare values.
document.getElementById('productSelectCreation').onclick = function() {
var val;
var checkbox = document.getElementById('productSelectCreation');
var sel = document.getElementById('productQtyCreation');
if (checkbox.checked)
{
val = "3";
}
else
val = "0";
}
var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
if (opt.value == val) {
sel.selectedIndex = j;
break;
}
}
}
It seems you are looking something like this.
function setValueToOne(chkbox)
{
if (chkbox.checked) {
alert("checked");
alert(chkbox.value);
document.getElementById("productQtyCreation").value = chkbox.value;
} else {
alert("Unchecked");
document.getElementById("productQtyCreation").value = 0
}
}
<select name="productSelect" id="productQtyCreation" class="form-control1">
<option value=""/></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>
<input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />Test
function setValueToOne(checkbox) {
if(checkbox.checked) {
document.getElementById('productQtyCreation').value = 3
}else{
document.getElementById('productQtyCreation').value = 0
}
}
<select id="productQtyCreation">
<option disabled selected value=""></option>
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="checkbox" name="productSelect" id="productSelectCreation" onClick="setValueToOne(this)" value="3" />

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

Change function on Select

Continue from change 3 dropdown values through javascript, Just need to show the
function changeprice1(id){
On select of second dropdown i.e. Medical and Biomedical Manuscript Rewriting. What to do now, i am getting out of thinking now. Any Help in jS ?
<script type="text/javascript">
function changeprice(id){
var value = id;
if(value == ""){
document.getElementById('price').value="";
alert("Please select one valid word count");
return false;
}
if(value == "Lessthan1000"){
var newprice = "USD 290";
}
if(value == "Lessthan2000"){
var newprice = "USD 540";
}
if(value == "Lessthan4000"){
var newprice = "USD 1050";
}
if(value == "Lessthan6000"){
var newprice = "USD 1900";
}
var eprice = newprice;
document.getElementById('price').value = eprice;
}
function changeprice1(id){
var value = id;
if(value == ""){
document.getElementById('price').value="";
alert("Please select one valid word count");
return false;
}
if(value == "ReLessthan1000"){
var newprice = "USD 390";
}
if(value == "ReLessthan2000"){
var newprice = "USD 690";
}
if(value == "ReLessthan4000"){
var newprice = "USD 1600";
}
if(value == "ReLessthan6000"){
var newprice = "USD 2900";
}
var eprice = newprice;
document.getElementById('price').value = eprice;
}</script>
Here is the first dropdown
<select name="sp" id="sp" class="servicecategory">
<option value="" selected>Please Select...</option>
<option value="Medical and Biomedical Manuscript Writing" <?php if($servicename == "Medical and Biomedical Manuscript Writing"){ echo(" selected=\"selected\""); } ?>>Medical and Biomedical Manuscript Writing </option>
<option value="Medical and Biomedical Manuscript Rewriting" <?php if($servicename == "Medical and Biomedical Manuscript Rewriting"){ echo(" selected=\"selected\""); } ?>>Medical and Biomedical Manuscript Rewriting</option>
</select>
Here is the Second Dropdown ---
<select name="sp" id="sp" class="servicecategory" onChange="changeprice(this.value)">
<option value="" selected>Please Select...</option>
<option value="Lessthan1000">1 - 1000 words</option>
<option value="Lessthan2000">1001 - 2000 words</option>
<option value="Lessthan4000">2001 - 4000 words</option>
<option value="Lessthan6000">4001 - 6000 words</option>
</select>
This is the price area where the price is showing atlast
<tr>
<td valign="top" align="right">Price:</td>
<td width="5"></td>
<td valign="top" align="left"><input type="text" name="price" id="price" value="" readonly="" size="20"><br />
</td>
</tr>
Try this
<script type="text/javascript">
function changeprice(id)
{
var value = id;
selectedmenu=document.getElementById("sp").value
if(selectedmenu == "select"){
alert("Please select one valid word count");
fnc();
return false;
}
if(selectedmenu=='Medical and Biomedical Manuscript Writing')
if(value == "Lessthan1000"){
var newprice = "USD 290";
}
if(value == "Lessthan2000"){
var newprice = "USD 540";
}
if(value == "Lessthan4000"){
var newprice = "USD 1050";
}
if(value == "Lessthan6000"){
var newprice = "USD 1900";
}
var eprice = newprice;
document.getElementById('price').value = eprice;
if(selectedmenu=='Medical and Biomedical Manuscript Rewriting')
{
if(value == "Lessthan1000"){
var newprice = "USD 390";
}
if(value == "Lessthan2000"){
var newprice = "USD 690";
}
if(value == "Lessthan4000"){
var newprice = "USD 1600";
}
if(value == "Lessthan6000"){
var newprice = "USD 2900";
}
var eprice = newprice;
document.getElementById('price').value = eprice;
}
}
function fnc()
{
document.getElementById("select").selected=true;
}
</script>
<select name="sp" id="sp" class="servicecategory" onchange="fnc()">
<option value="select" selected>Please Select...</option>
<option value="Medical and Biomedical Manuscript Writing" >Medical and Biomedical Manuscript Writing</option>
<option value="Medical and Biomedical Manuscript Rewriting" >Medical and Biomedical Manuscript Rewriting</option>
</select>
<select name="Word_Count" id="Word_Count" onChange="changeprice(this.value)">
<option value="select" id="select">Please Select...</option>
<option value="Lessthan1000">1 - 1000 words</option>
<option value="Lessthan2000">1001 - 2000 words</option>
<option value="Lessthan4000">2001 - 4000 words</option>
<option value="Lessthan6000">4001 - 6000 words</option>
</select>
<tr>
<td valign="top" align="right">Price:</td>
<td width="5"></td>
<td valign="top" align="left"><input type="text" name="price" id="price" value="" readonly="" size="20"><br /></td>
</tr>

Categories

Resources