Change text align of div from dropdown selection?

Change text align of div from dropdown selection? - javascript

I have a few dropdown list to style the font of a div. However i cant seem to get the align to work. Please help!!
I have always found my answers on google and not had such a tough time getting round things. The align is really bugging me, that i cant find a solution.
<SCRIPT LANGUAGE="JavaScript">
function fontSize(size){
document.getElementById("lineOne").style.fontSize = size
}
function fontFamily(family) {
document.getElementById("lineOne").style.fontFamily = family
}
function fontStyle(style) {
document.getElementById("lineOne").style.fontStyle = style
}
function fontWeight(weight) {
document.getElementById("lineOne").style.fontWeight = weight
}
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
function setColor() {
var color = document.getElementById("color").value;
document.getElementById("myDiv").style.color = color;
}
function alignl(ele){
document.getElementById("lineOne").style.align = ele
}
</SCRIPT>
And the body is aa such:
<body>
Size:
<select name=fontSizeChanger onchange="fontSize(this.value)">
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12" selected="selected">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
</select>
Colour:
<select id="color" onclick="setColor();">
<option value="white">white</option>
<optionvalue="black"selected="selected">black</option>
<option value="red">red</option>
<option value="lightblue">light blue</option>
<option value="darkblue">dark blue</option>
<option value="lightgreen">light green</option>
<option value="darkgreen">dark green</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
<option value="pink">pink</option>
<option value="purple">purple</option>
<option value="gray">gray</option>
</select>
Family:
<select id="fontFamilyChanger" onchange="fontFamily(this.value)">
<option value="sans-serif" selected="selected">Sans Serif</option>
<option value="Impact">Impact</option>
<option value="times new roman">Times New Roman</option>
</select>
Style:
<select id="fontStyleChanger" onchange="fontStyle(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="italic">Italic</option>
<option value="oblique">Oblique</option>
</select>
Weight:
<select id="fontWeightChanger" onchange="fontWeight(this.value)">
<option value="normal" selected="selected">Normal</option>
<option value="bold">Bold</option>
</select>
Align:
<select id='s' name='s' onchange="alignl(this.value);">
<option value="left">left</option>
<option value="right">right</option>
<option value="center">center</option>
<option value="top">top</option>
</select>
<form name="myForm">
<input name="myContent"></input>
<input type="button" value="Add content" onClick="addContent('lineOne', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
<div id="myDiv">
<div id="lineOne"></div>
</div>
</body>

You can set the align in the same way you set the other styling properties, but the variable is named textAlign, not align.
function alignl(style) {
document.getElementById("lineOne").style.textAlign = style;
}

Related

deactivate element (css) based on a JavaScript trigger

Based on the given selection i want to deaktivate the element(opt_hello_message_embed_color_title). Incase of the value NO the element should not be active. How can i realise that in javascript?
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>

Just set the disabled property true to deactivate element
const select = document.querySelector("#opt_hello_message_embed_color_title");
select.disabled = true;
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>

Just a addon to Ahsan's answer.
If you want the button dropdown to disappear use this:-
const select = document.querySelector("#opt_hello_message_embed_color_title");
select.style.display= "none";// to make the dropdown reappear use select.style.display= "block";
<select id="opt_hello_message_embed" name="opt_embed">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<label for="embed_color_title">Embed color (if active)</label>
<select id="opt_hello_message_embed_color_title" name="opt_embed_color_title">
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>

change select option by javascript

i have problem in javascript
i make carwebsite
i need to achieve functionality as per the image
when I choose company in "make" select box,
it shows me all classes. Then I need to choose a "class" from second dropdown and it should show me all Models
now i get one code
<script type="text/javascript">
$(document).ready(function(){
$('.car').change(function()
{ getcar = $(this).val();
//console.log(getcar);
$('.subcar').hide();
$('.'+getcar).show();
}); });
// end DOM
</script>
this is select (make)
<select name="car" class="car">
<option value="0" SELECTED="SELECTED">--Choose--</option>
<option value="Acura">Acura</option>
<option value="Alfa_Romeo">Alfa Romeo</option>
<option value="Aston_Martin">Aston Martin</option>
<option value="Audi">Audi</option>
<option value="Bentley">Bentley</option>
<option value="BMW">BMW</option>
<option value="Buick">Buick</option>
<option value="Cadillac">Cadillac</option>
<option value="Can_Am">Can Am</option>
<option value="Chery">Chery</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Chrysler">Chrysler</option>
<option value="Citroen">Citroen</option>
<option value="Daihatsu">Daihatsu</option>
<option value="Dodge">Dodge</option>
<option value="Ducati">Ducati</option>
<option value="Ferrari">Ferrari</option>
<option value="Fiat">Fiat</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
</select>
this is select (class)
<select name="branch_name" class="subcar Acura" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="CL">CL</option>
<option value="CSX">CSX</option>
<option value="EL">EL</option>
<option value="ILX">ILX</option>
<option value="ZDX">ZDX</option></select>
<select name="branch_name" class="subcar Alfa_Romeo" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="101">101</option>
<option value="156">156</option>
<option value="156CROSSWAGON">156CROSSWAGON</option>
<option value="Spider">Spider</option>
</select>
<select name="branch_name" class="subcar Aston_Martin" style="display:none;">
<option value="0" SELECTED="SELECTED" DISABLED="DISABLED">- None -</option>
<option value="DB9">DB9</option>
<option value="Healey">Healey</option>
<option value="Vantage">Vantage</option>
</select>
how can i make third select
???

How to make select appear one after one in JS?

I am new in JS and I need some help. I want my 2-nd selectto appear only if the first one is already chosen, the 3-th select to appear after the second choise is done and the submit button to appear after the third choise is done.Is it possible to do that using a loop ?
<style>
select{float:left}
#month,#day,input{display:none}
</style>
<select required id='year' class='selectOption' onchange='select(this)'>
<option value=""> Select year</option>
<option value="">2016</option>
<option value="">2015</option>
<option value="">2014</option>
<option value="">2013</option>
<option value="">2012</option>
<option value="">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
<option value="">2007</option>
</select>
<select required id='month' class='selectOption' onchange='select(this)'>
<option value=""> Select month</option>
<option value="">January</option>
<option value="">February</option>
<option value="">March</option>
<option value="">April</option>
<option value="">May</option>
<option value="">June</option>
<option value="">July</option>
<option value="">August</option>
<option value="">September</option>
<option value="">October</option>
<option value="">November</option>
<option value="">December</option>
</select>
<select required id='day' class='selectOption' onchange='select(this)'>
<option value="">Select Day</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
<option value="">11</option>
<option value="">12</option>
<option value="">13</option>
<option value="">14</option>
<option value="">15</option>
<option value="">16</option>
<option value="">17</option>
<option value="">18</option>
<option value="">19</option>
<option value="">20</option>
<option value="">21</option>
<option value="">22</option>
<option value="">23</option>
<option value="">24</option>
<option value="">25</option>
<option value="">26</option>
<option value="">27</option>
<option value="">28</option>
<option value="">29</option>
<option value="">30</option>
<option value="">31</option>
</select>
<input type="submit" class='selectOption'>
</form>
function select(par) {
var i = 0;
var x = document.getElementsByClassName('selectOption');
if (par.selectedIndex !== "0" && i<x.length) {
x[i++].style.display = 'block';
}
}
</script>

you can achieve this by hiding all select but the first one on page load and displaying them one by one after selecting the previous select.
<select required id='month' class='selectOption hide' onchange='select(this)'>
<select required id='day' class='selectOption hide' onchange='select(this)'>
plunker : http://plnkr.co/edit/oKwq0q4IB5poKuUOa6oG?p=preview
Define your function like this.
function select(par) {
if (par.selectedIndex !== 0) {
par.nextElementSibling.className = "selectOption";
}
}

Getting javascript to output calculation to HTML

Hey im having trouble getting my javascript to ouput my calculations into my html...
if you can please check my code and see where i might be going wrong thatd be great
var doorDesign_Prices= new Array();
doorDesign_Prices["None"]=0;
doorDesign_Prices["PRP15"]=8.10;
doorDesign_Prices["PRP15 Deluxe"]=12.30;
doorDesign_Prices["PRP15 R"]=11.05;
doorDesign_Prices["PRP25"]=11.30;
doorDesign_Prices["PRP2525"]=13.35;
doorDesign_Prices["PRP35"]=11.30;
doorDesign_Prices["PRP45"]=13.90;
doorDesign_Prices["PRP55"]=17.85;
doorDesign_Prices["PRP5555"]=26.75;
doorDesign_Prices["PRP65"]=11.30;
doorDesign_Prices["PRP6565"]=13.60;
doorDesign_Prices["PRP85"]=17.75;
doorDesign_Prices["PRP95"]=11.30;
doorDesign_Prices["PRP9595"]=13.35;
doorDesign_Prices["PRP100"]=23.20;
doorDesign_Prices["PRP105"]=31.75;
doorDesign_Prices["PRP110"]=30.75;
doorDesign_Prices["PRP110110"]=35.75;
doorDesign_Prices["PRP181"]=21.75;
doorDesign_Prices["PRP185"]=21.75;
doorDesign_Prices["PRP190"]=10.10;
doorDesign_Prices["PRP200M"]=20.75;
doorDesign_Prices["PRP201M"]=20.75;
doorDesign_Prices["PRP201MT"]=20.75;
function getDoorDesign() {
var doorDesignSelect = document.getElementById('doorDesign');
return doorDesign_Prices[doorDesignSelect.value];
}
var woodType_Prices= new Array();
woodType_Prices["None"]=10.01;
woodType_Prices["C. Pine"]=14.60;
woodType_Prices["Cherry"]=7.00;
woodType_Prices["Hickory"]=5.40;
woodType_Prices["K Pine"]=24.00;
woodType_Prices["Mahogany"]=12.51;
woodType_Prices["Maple"]=7.46;
woodType_Prices["Pt. Grade"]=18.16;
woodType_Prices["R. Birch"]=9.18;
woodType_Prices["Red Oak"]=13.12;
woodType_Prices["Sapele"]=7.03;
woodType_Prices["W. Ash"]=12.04;
woodType_Prices["W. Oak"]=8.05;
woodType_Prices["Walnut"]=11.05;
function getWoodType() {
var woodTypeSelect = document.getElementById('woodType');
return woodType_Prices[woodTypeSelect.value];
}
var lipType_Prices= new Array();
lipType_Prices["A"]=0.95;
lipType_Prices["B"]=0.95;
lipType_Prices["C"]=1.90;
lipType_Prices["D"]=0.95;
lipType_Prices["E"]=0.95;
lipType_Prices["F"]=0.95;
lipType_Prices["I"]=0.95;
lipType_Prices["L"]=0.95;
lipType_Prices["M"]=0.95;
lipType_Prices["R"]=0.95;
lipType_Prices["S"]=0.95;
lipType_Prices["T"]=0.95;
lipType_Prices["Z"]=0.95;
function getLipType() {
var lipTypeSelect = document.getElementById('lipType');
//alert(filling_prices[cakeSelect.value]);
return lipType_Prices[lipTypeSelect.value];
}
var mouldType_Prices= new Array();
mouldType_Prices["4/4"]=0;
mouldType_Prices["5/4"]=0;
mouldType_Prices["Deluxe"]=0;
mouldType_Prices["M"]=0;
mouldType_Prices["P"]=0;
mouldType_Prices["S"]=0;
mouldType_Prices["T"]=0;
mouldType_Prices["A"]=0;
mouldType_Prices["V"]=0;
mouldType_Prices["228"]=0;
mouldType_Prices["MT"]=0;
function getMouldType() {
var mouldTypeSelect = document.getElementById('mouldType');
return mouldType_Prices[mouldTypeSelect.value];
}
var panelType_Prices= new Array();
panelType_Prices["A"]=0;
panelType_Prices["B"]=0;
panelType_Prices["C"]=0;
panelType_Prices["D"]=0;
panelType_Prices["E"]=0;
panelType_Prices["F"]=0;
panelType_Prices["M"]=0;
panelType_Prices["O"]=0;
panelType_Prices["Q"]=0;
panelType_Prices["R"]=0;
panelType_Prices["S"]=0;
panelType_Prices["T"]=0;
panelType_Prices["V"]=0;
panelType_Prices["Rev C"]=0;
panelType_Prices["Rev F"]=0;
panelType_Prices["Bead"]=0;
function getPanelType() {
var panelTypeSelect = document.getElementById('panelType');
return panelType_Prices[panelTypeSelect.value];
}
var gradeAndThickness_Prices= new Array();
gradeAndThickness_Prices["None"]=0;
gradeAndThickness_Prices["4/4 Standard"]=13.12;
gradeAndThickness_Prices["4/4 Select"]=17.06;
gradeAndThickness_Prices["5/4 Standard"]=17.06;
gradeAndThickness_Prices["5/4 Select"]=22.17;
function getGradeAndThickness() {
var gradeAndThicknessSelect = document.getElementById('gradeAndThickness');
return gradeAndThickness_Prices[gradeAndThicknessSelect.value];
}
var doorOptions_Prices= new Array();
doorOptions_Prices["None"]=0;
doorOptions_Prices["Finger Pulls"]=2.00;
doorOptions_Prices["Hinge Holes"]=5.00;
doorOptions_Prices["Lip As Pair"]=2.00;
function getDoorOptions() {
var doorOptionsSelect = document.getElementById('doorOptions');
return doorOptions_Prices[doorOptionsSelect.value];
}
function calculateTotal() {
var total = getDoorDesign() + getWoodType() + getMouldType() + getPanelType() + getGradeAndThickness + getFinish + getDoorOptions;
var totalEl = document.getElementById('totalPrice');
document.getElementById('totalPrice').innerHTML = "Your Total is: $" + total;
}
function hideTotal() {
var totalEl = document.getElementById('totalPrice');
totalEl.style.display = 'none';
}
<HEAD>
<script src="OrderForm.js"></script>
</HEAD>
<body onload='hideTotal()'>
<div id="wrap">
<form action="" id="orderForm" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<table align=center border=0 width=300 cellpadding="1">
<tr>
<td>
<select id="doorDesign" name='doorDesign' onchange="calculateTotal()">
<option>Door Design</option>
<option value="PRP15">PRP15</option>
<option value="PRP15 DELUXE">PRP15 DELUXE</option>
<option value="PRP 15 R">PRP15 R</option>
<option value="PRP25">PRP25</option>
<option value="PRP2525">PRP2525</option>
<option value="PRP35">PRP35</option>
<option value="PRP45">PRP45</option>
<option value="PRP55">PRP55</option>
<option value="PRP5555">PRP5555</option>
<option value="PRP65">PRP65</option>
<option value="PRP6565">PRP6565</option>
<option value="PRP85">PRP85</option>
<option value="PRP95">PRP95</option>
<option value="PRP9595">PRP9595</option>
<option value="PRP100">PRP100</option>
<option value="PRP105">PRP105</option>
<option value="PRP110">PRP110</option>
<option value="PRP110110">PRP110110</option>
<option value="PRP181">PRP181</option>
<option value="PRP185">PRP185</option>
<option value="PRP190">PRP190</option>
<option value="PRP200M">PRP200M</option>
<option value="PRP201M">PRP201M</option>
<option value="PRP201MT">PRP201MT</option>
</select>
</td>
<td>
<select id="woodType" name='woodType' onchange="calculateTotal()">
<option>Wood Type</option>
<option value="C. Pine">C. Pine</option>
<option value="Cherry">Cherry</option>
<option value="Hickory">Hickory</option>
<option value="K. Pine">K. Pine</option>
<option value="Mahogany">Mahogany</option>
<option value="Maple">Maple</option>
<option value="Pt. Grade">Pt. Grade</option>
<option value="R. Birch">R. Birch</option>
<option value="Red Oak">Red Oak</option>
<option value="Sapele">Sapele</option>
<option value="W. Ash">W. Ash</option>
<option value="W. Birch">W. Birch</option>
<option value="W. Oak">W. Oak</option>
<option value="Walnut">Walnut</option>
</select>
</td>
<td>
<select id="lipType" name='lipType' onchange="calculateTotal()">
<option>Lip Type</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="I">I</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="Z">Z</option>
</select>
</td>
<td>
<select id="mouldType" name='mouldType' onchange="calculateTotal()">
<option>Mould Type</option>
<option value="4/4">4/4</option>
<option value="5/4">5/4</option>
<option value="Delue">Deluxe</option>
<option value="M">M</option>
<option value="P">P</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="A">A</option>
<option value="V">V</option>
<option value="228">228</option>
<option value="MT">MT</option>
</select>
</td>
<td>
<select id="panelType" name='panelType' onchange="calculateTotal()">
<option>Panel Type</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="M">M</option>
<option value="O">O</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="V">V</option>
<option value="Rev C">Rev C</option>
<option value="Rev F">Rev F</option>
<option value="Bead">Bead</option>
</select>
</td>
<td>
<select id="gradeAndThickness" name='gradeAndThickness' onchange="calculateTotal()">
<option>Grade and Thickness</option>
<option value="4/4 Standard">4/4 Standard</option>
<option value="4/4 Select">4/4 Select</option>
<option value="5/4 Standard">5/4 Standard</option>
<option value="5/4 Select">5/4 Select</option>
</select>
</td>
<td>
<select id="finish" name='finish' onchange="calculateTotal()">
<option>Finish</option>
<option value="Clear">Clear</option>
<option value="Wheat">Wheat</option>
<option value="Fruitwood">Fruitwood</option>
<option value="Heartwood">Heartwood</option>
<option value="White Stain">White Stain</option>
<option value="Cinnamon">Cinnamon</option>
<option value="W. Prime">W. Prime</option>
</select>
</td>
<td>
<select id="doorOptions" name='doorOptions' onchange="calculateTotal()">
<option>Options</option>
<option value="Finger Pulls">Finger Pulls</option>
<option value="Hinge Holes">Hinge Holes</option>
<option value="Lip As Pair">Lip As Pair</option>
</select>
</td>
</tr>
</table>
</div>
<div id="totalPrice"></div>
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
</div>
</form>
</div>
</div>
</body>
</html>
For now I just want to be able to output the calculations into my HTML before I make this form any more complicated.

the variable getFinish is not declare at function calculateTotal(). so you should declare this variable or function before using it.

in tag remove onload='hideTotal()' it will output your javascript calculations into my html

Set Hidden Value Depending on Selection of two Dropdowns

I am trying to set a hidden value depending on the values set for two different dropdown boxes.
Here is what I have so far, it is not working, I expect it to set the value of #bundle_option[5] to 4 when the dropdown #bundle-option-5-color is set to Black and #bundle-option-5-size is set to Child.
<script type='text/javascript'>
$j(document).ready(function() {
$j('#bundle-option-5-color').change(function() {
if ($j(this).find('option:selected').text() == 'Black' &&
$j('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$j('#bundle_option\\[5\\]').val('4');
}
});
});
</script>
HTML:
<select id="bundle-option-5-color" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="hidden" value="" name="bundle_option[5]">

Bind your function to the both change events:
$(document).ready(function() {
var fn = function() {
if ($('#bundle-option-5-color').find('option:selected').text() == 'Black' &&
$('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$('#bundle_option\\[5\\]').val('4');
}
};
$('#bundle-option-5-color').change(fn);
$('#bundle-option-5-size').change(fn);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bundle-option-5-color" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="text" value="" name="bundle_option[5]">

As mentioned in the comments you need to trigger your function for both option box change events. You can do that with this wildcard selector $('[id^=bundle-option-5]').change(function() {}).
Please find your code below and here at jsFiddle.
$(document).ready(function() {
$('[id^=bundle-option-5]').change(function() {
//console.log(this);
// size or color changed
if ($('#bundle-option-5-color').find('option:selected').text() == 'Black' &&
$('#bundle-option-5-size').find('option:selected').text() == 'Child')
{
$('#bundle_option\\[5\\]').val('4');
alert('black and child chosen!');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="bundle-option-5-color" name="bundle_option[5]" change-container-classname"="" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
<option value="Pink">Pink</option>
<option value="Purple">Purple</option>
<option value="Red">Red</option>
<option value="Teal">Teal</option>
<option value="White">White</option>
</select>
<select id="bundle-option-5-size" name="bundle_option[5]" change-container-classname"="" bundle-option-select="" required-entry="" required="">
<option value="">Choose a selection...</option>
<option value="Child">Child</option>
<option value="Youth">Youth</option>
<option value="Adult Small">Adult Small</option>
<option value="Adult Medium">Adult Medium</option>
<option value="Adult Large">Adult Large</option>
<option value="Adult X-Large">Adult X-Large</option>
<option value="Adult XX-Large">Adult XX-Large</option>
</select>
<input id="bundle_option[5]" type="hidden" value="" name="bundle_option[5]">

We Keep Coding

JavaScript is the programming language of the Web.

Change text align of div from dropdown selection? - javascript

You can set the align in the same way you set the other styling properties, but the variable is named textAlign, not align. function alignl(style) { document.getElementById("lineOne").style.textAlign = style; }

Related

deactivate element (css) based on a JavaScript trigger

change select option by javascript

How to make select appear one after one in JS?

Getting javascript to output calculation to HTML

Set Hidden Value Depending on Selection of two Dropdowns

Categories

Resources