I am not very good with javascript and I dont even know if this is possible.
Im trying to get a dropdown to be selected depending on the value of a text field
I have the following text field which is calculated by adding the Number of Adults and Children together.
<input type="text" name="Total" id="Total" onfocus="this.blur()"/>
What I would like to do is depending on the value of the Total have the following dropdown change .ie if Total is less than 10 have the dropdown show 1 Hr, between 10 and 20 show 2 Hrs etc
<select name="Duration">
<option value="1">1 Hr</option>
<option value="2">2 Hrs</option>
<option value="3">3 Hrs</option>
<option value="4">4 Hrs</option>
</select>
I think this is the general direction that you would need to go (I am only including the case where the total is less than 10, so you would need to add the other situations to the if statement):
<input type="text" name="Total" id="Total" onfocus="this.blur()" onblur="if(this.value < 10) { document.getElementById('totalDropDown').value = 1; }"/>
<select name="Duration" id="totalDropDown">
<option value="1">1 Hr</option>
<option value="2">2 Hrs</option>
<option value="3">3 Hrs</option>
<option value="4">4 Hrs</option>
</select>
you can look at this fiddle: http://jsfiddle.net/knnw8/1/
I would start with
<input type="text" name="Total" id="Total" onChange="fillCombobox(this)"/>
and then assign the options you want in the combobox as you can see in the fiddle
(you can ofcourse also use onBlur instead of onChange)
edit: I've updated the fiddle a little bit more to your needs
Try this i think this is what you need
<script type="text/javascript">
function chkVal(ele){
var val = ele.value;
console.log(val);
if(val < 10){
$('#totalDropDown').val(1)
}
else if(val <= 20){
$('#totalDropDown').val(2)
}
else if(val <= 30){
$('#totalDropDown').val(3)
}
else if(val > 30){
$('#totalDropDown').val(4)
}
}
</script>
<input type="text" onkeyup="chkVal(this)"/>
<select name="Duration" id="totalDropDown">
<option value="1">1 Hr</option>
<option value="2">2 Hrs</option>
<option value="3">3 Hrs</option>
<option value="4">4 Hrs</option>
</select>
Related
I've got 2 dropdowns
This is part of a form to buy either a Short Sleeve or Long Sleeve shirt using Paypal.
Short Sleeve is one price. Long Sleeve is another price. That works great. Using hidden values I can make a 2XL and 3XL Short Sleeve shirt change price. That works great.
The javascript is used to change the pricing for 2XL and 3XL Long Sleeve shirts.
This also works great. The problem I'm having is making the option_select values change to say "LS 2XL" or "LS 3xL" instead of "SS 2XL" or "SS 3XL" (along with the rest of the Long sleeve sizes).
I'm not proficient in javascript, but I can usually piece enough together to make thing work. This one has me stumped. Any help using javascript would be appreciated.
function changeHiddenInput(objDropDown) {
var upcharge2XL = document.getElementById("hiddenvalue2XL");
var upcharge3XL = document.getElementById("hiddenvalue3XL");
upcharge2XL.value = 20.00;
upcharge3XL.value = 21.00;
}
<select name="amount" size="1" id="Combobox1" onchange="changeHiddenInput(this)">
<option value="15.00">Short Sleeve</option>
<option value="18.00">Long Sleeve</option>
</select><br/>
<select name="os0" size="1" id="Combobox2">
<option selected>Select Size</option>
<option value="SS Small">Small</option>
<option value="SS Medium">Medium</option>
<option value="SS Large">Large</option>
<option value="SS XL">XL</option>
<option value="SS 2XL">2XL + $2</option>
<option value="SS 3XL">3XL + $3</option>
<option value="--------">--------</option>
<option value="SS Youth Small">Youth Small</option>
<option value="SS Youth Medium">Youth Medium</option>
<option value="SS Youth Large">Youth Large</option>
</select><br/>
Hidden Paypal Values
<input type="hidden" name="option_select0" value="SS 2XL" id="hiddensize2XL">
<input type="hidden" name="option_amount0" value="17.00" id="hiddenvalue2XL">
<input type="hidden" name="option_select1" value="SS 3XL" id="hiddensize3XL">
<input type="hidden" name="option_amount1" value="18.00" id="hiddenvalue3XL">
I think you mean this?
document.getElementById("pp1").addEventListener("submit",function(e) {
e.preventDefault(); // remove this line when finished testing
const sleeve = document.getElementById("Combobox1").value;
const size = document.getElementById("Combobox2").value;
if (sleeve === "" || size === "") {
alert("Please choose sleeves and size")
e.preventDefault(); // stop submission
}
let amt = sleeve === "SS" ? 15 : 17;
if (size === "2XL") amt += 2;
else if (size === "3XL") amt += 3;
document.getElementById("hiddensize2XL").value=size
document.getElementById("hiddensize3XL").value=size
document.getElementById("hiddenvalue2XL").value = amt.toFixed(2)
document.getElementById("hiddenvalue3XL").value = amt.toFixed(2);
})
<select name="amount" size="1" id="Combobox1">
<option value="" selected>Sleeves</option>
<option value="SS">Short Sleeve</option>
<option value="LS">Long Sleeve</option>
</select><br/>
<select name="os0" size="1" id="Combobox2">
<option value="" selected>Select Size</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XL">XL</option>
<option value="2XL">2XL + $2</option>
<option value="3XL">3XL + $3</option>
<option value="--------">--------</option>
<option value="Youth Small">Youth Small</option>
<option value="Youth Medium">Youth Medium</option>
<option value="Youth Large">Youth Large</option>
</select><br/>
Hidden Paypal Values
<form id="pp1">
<input type="text" name="option_select0" value="" id="hiddensize2XL">
<input type="text" name="option_amount0" value="17.00" id="hiddenvalue2XL">
<input type="teyxt" name="option_select1" value="" id="hiddensize3XL">
<input type="teyt" name="option_amount1" value="18.00" id="hiddenvalue3XL">
<input type="submit" />
</form>
I have looked around and haven't found a solution to my problem, I am trying to learn javascript and jquery. what I want to learn is how can I do so when I select the option "none" the <input> and the data inside it, should be disabled.
this is my attempts:
First attempt link:http://jsfiddle.net/kmtLy705/7/
First attempt code: (Works with buttons)
<input disabled id="page_navigation1" type="number">
<button class="add">Add</button>
<button class="remove">Remove</button>
<select>
<option value="0" class="add" selected>None</option>
<option value="1" class="remove">select</option>
<option value="2" class="remove">select</option>
<option value="3" class="remove">select</option>
<option value="4" class="remove">select</option>
<option value="5" class="remove">select</option>
</select>
jquery
$('.add').click(function() {
$('#page_navigation1').attr('disabled', true)
});
$('.remove').click(function() {
$('#page_navigation1').removeAttr('disabled');
});
Now, this code works with buttons but I have tried countless ways to make it work with an option and haven't found a solution yet.
Second attempt link: http://jsfiddle.net/5u9pfot0/1/ this doesn't work at all but the idea was there (when val1 is selected then the input should be disabled)
Second attempt code:
<select id="selectid" name="selectname">
<option value="val1" id="valid1"> Val1 </option>
<option value="val2" id="valid2"> Val2 </option>
<option value="val3" id="valid3"> Val3 </option>
</select>
<input disabled id="page_navigation1" type="number">
jquery:
if (document.getElementById('selectid').value == "val1") {
$('#page_navigation1').attr('disabled', true)
}
I have modified your second approach just a little.
Try doing below:
function callthis()
{
if (document.getElementById('selectid').value == "val1") {
$('#page_navigation1').attr('disabled', true);
}
else
$('#page_navigation1').attr('disabled', false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectid" name="selectname" onchange="callthis();">
<option default disabled>Choose one</option>
<option value="val1" id="valid1"> Val1 </option>
<option value="val2" id="valid2"> Val2 </option>
<option value="val3" id="valid3"> Val3 </option>
</select>
<input disabled id="page_navigation1" type="number">
I'm working on a website project and really need help as I'm new to all this. I'm basically given values to every option in the drop down menu's and make them add together which I've managed. But then I want to the total value from the menus to then be the range for a pseudo random to be a generated and added to the age I input.
When I hit submit I'd like it to calculate all that and display the result on a new page. I want to be able to do all this within javascript and html.
Any help would be greatly appreciated! My coding is below. Thanks so much!
<body>
<form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="submit" value="Total" />
<span>Total: </span><span id="result"></span>
</form>
<script type="text/javascript">
function calcTotal(oForm){
var sum = 0;
for(i=0; i < oSels.length; i++){
sum += new Number(oSels[i].value);
}
document.getElementById('result').innerHTML = sum;
return false;
}
window.onload=function(){
oSels = document.getElementById('form1').getElementsByTagName('select');
for(i=0; i < oSels.length; i++){
oSels[i].onchange=function(){
document.getElementById('result').innerHTML = '';
}
}
}
</script>
I played with your code. I don't now if it's someting like that that you wanted but here is an example of random score.
It now use the age to generate a value.
Take a look if you like it at my codepen.
I changed the age input:
Age<input id="age" name="" type="number" value="" />
I also added a new function to generate random number between min-max:
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
And modified how the sum is calculated:
var age = document.getElementById('age').value;
sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 4),sum+(age / 4)));
//Add some random. The more you are older, the more random it is.
You can do a lot of different generated sum. If you want less modifications, we also can take the last digit of the age to get the min/max value generated...
Edit:
To help you share variables between pages, Look at this question.
Adding this as an answer as the submitter considers it a good idea:
Put the result from all your maths into hidden fields. Then when you submit the form, the values will be passed along.
You don't need to do anything special really. Just add fields like this:
<input type="hidden" value="[yourValue]" name="fieldName" id="fieldId" />
For the yourValue part, simply insert your caclulated value from the JavaScript:
document.getElementById("fieldId").value = calculatedValue;
Since it's all part of the same form that you're submitting anyway, they will all be past along. You can retrieve the fields on the receiving page as normal.
I downloaded and edited your entire code block. I changed a couple of things.
1. You don't need the onsubmit on your form. You need a call the JavaScript function on a Total button. The submit button is added to submit the form when the user is done.
2. A hidden field to hold your result is added to the form.
3. The function where you do your calculation has an addition to send the calulated total to the new hidden field.
4. You need to add something to the ACTION, so it knows where to submit the form. You can also remove the ALERT. I just added that to be sure it worked right.
I've run and tested this, and it works exactly as expected. This is what the edited code looks like:
<body>
<form id="form1" action="" method="post">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="button" value="Total" onclick="calcTotal();" />
<input name="submit" type="submit" value="Submit" />
<span>Total: </span><span id="result"></span>
<input type="hidden" value="0" name="resultIs" id="resultIs" />
</form>
<script type="text/javascript">
function calcTotal(oForm) {
var sum = 0;
for (i = 0; i < oSels.length; i++) {
sum += new Number(oSels[i].value);
}
//This is what you are using to display the result to your user.
document.getElementById('result').innerHTML = sum;
//This will add the value of the result to a hidden field I added to the form. When you submit it, just request the value of "resultIs"
document.getElementById("resultIs").value = sum;
alert(sum);
return false;
}
//I really don't even see that this is needed. Your form doesn't need to be cleared onLoad.
window.onload = function() {
oSels = document.getElementById('form1').getElementsByTagName('select');
for (i = 0; i < oSels.length; i++) {
oSels[i].onchange = function() {
document.getElementById('result').innerHTML = '';
}
}
}
</script>
I'm trying to limit the number of options based on another selection. For instance in this example "How many credits is the class you skipped?" should be limited to equal or less than the previous question "How many total credits are you taking this semester?". So if I'm only taking 9 credits on semester the second question of how many credits I'm skipping should be equal or less than the 9 credits for the whole semester.
Any help will be greatly appreciated.
Here is the jsfiddle: http://jsfiddle.net/k7tDP/1/
Here is the JS:
function calculateCost() {
'use strict';
// enter annual tuition
var $annualTuition = parseInt($('#annual_tuition').val());
// tuition per semester
var semesterTuition = Math.round($annualTuition / 3);
// total number of credits for semester
var $semesterCredits = parseInt($('#semester_credits').val());
// cost of a single credit
var singleCreditCost = semesterTuition / $semesterCredits;
// total credits for class being skipped
var $skippedTotalCredits = parseInt($('#skipped_total_credits').val());
// total cost for class being skipped
var skippedTotalCreditsCost = $skippedTotalCredits * singleCreditCost;
// number of times skipped class meets per week
var $skippedWeekDays = parseInt($('#skipping_class_meet').val());
// from date
var fromDate = $('#from').datepicker('getDate');
// to date
var toDate = $('#to').datepicker('getDate');
// calculate number of weeks in date range (semester) using 'from / to' dates
var skippedWeeks = Math.ceil((toDate - fromDate) / (1000 * 7 * 60 * 60 * 24));
console.log(skippedWeeks);
// total number of days in semester for class being skipped
//var $skippedTotalDays = parseInt($('#skipped_total_days').val());
var skippedTotalDays = $skippedWeekDays * skippedWeeks;
// (total cost of class) / (total number of class days in semester) = cost of class
var skippedSingleClassCost = skippedTotalCreditsCost / skippedTotalDays;
return skippedSingleClassCost.toFixed(2);
}
$(function() {
'use strict';
$('#from').datepicker({
defaultDate: '+1w',
changeMonth: true,
numberOfMonths: 1,
onSelect: function() {
//toDate = $(this).datepicker('getDate');
}
});
$('#to').datepicker({
defaultDate: '+1w',
changeMonth: true,
numberOfMonths: 1,
onSelect: function() {
//fromDate = $(this).datepicker('getDate');
}
});
$('#cost').on('click', function() {
$('.costFigure').fadeIn('fast');
$('#costTotal').html(calculateCost());
});
});
Here is the html:
<form id="costForm" action="#" onsubmit="#">
<div>
<label for="annual_tuition">What is your annual tuition (estimated)?</label>
<div class="styled_select">
<select name="annual_tuition" id="annual_tuition" value="tuition amount" autofocus>
<option value="0"> </option>
<option value="5000">$5,000</option>
<option value="10000">$10,000</option>
<option value="15000">$15,000</option>
<option value="20000">$20,000</option>
<option value="25000">$25,000</option>
<option value="30000">$30,000</option>
<option value="35000">$35,000</option>
<option value="40000">$40,000</option>
<option value="45000">$45,000</option>
<option value="50000">$50,000</option>
</select>
</div>
</div>
<div>
<label for="semester_credits">How many total credits are you taking this semester?</label>
<div class="styled_select">
<select name="semester_credits" id="semester_credits" value="" tabindex="2">
<option value="0"> </option>
<option value="3">3 credits</option>
<option value="6">6 credits</option>
<option value="9">9 credits</option>
<option value="12">12 credits</option>
<option value="13">13 credits</option>
<option value="14">14 credits</option>
<option value="15">15 credits</option>
<option value="16">16 credits</option>
<option value="17">17 credits</option>
<option value="18">18 credits</option>
</select>
</div>
</div>
<div>
<label for="skipped_total_credits">How many credits is the class you skipped?</label>
<div class="styled_select">
<select name="skipped_total_credits" id="skipped_total_credits" value="" tabindex="2">
<option value="0"> </option>
<option value="3">3 credits</option>
<option value="6">6 credits</option>
<option value="9">9 credits</option>
<option value="12">12 credits</option>
<option value="13">13 credits</option>
<option value="14">14 credits</option>
<option value="15">15 credits</option>
<option value="16">16 credits</option>
<option value="17">17 credits</option>
<option value="18" disabled>18 credits</option>
</select>
</div>
</div>
<div>
<label for="skipping_class_meet">How many times a week does the class you skipped meet?</label>
<div class="styled_select">
<select name="skipping_class_meet" id="skipping_class_meet" value="" tabindex="2">
<option value="0"> </option>
<option value="1">1 time a week</option>
<option value="2">2 times a week</option>
<option value="3">3 times a week</option>
<option value="4">4 times a week</option>
<option value="5">5 times a week</option>
</select>
</div>
</div>
<div class="dateRange clearfix">
<label>Between what months are you enrolled in this class?</label>
<div style="width: 48%; float: left;">
<label for="from">From:</label>
<input type="text" id="from" name="from">
</div>
<div style="width: 48%; float: right;">
<label for="to">To:</label>
<input type="text" id="to" name="to">
</div>
</div>
<div>
<button id="cost" type="button">Calculate</button>
</div>
<div class="costFigure">
<h1>your missed class cost you $<span id="costTotal"></span></h1>
</div>
</form>
On change of your dropdown fire a onchange trigger and on the basis of values make the 2nd dropdown enable or disabled.
$("#semester_credits").change(function () {
var $this=this;
$("#skipped_total_credits").children().each(function(){
$(this).attr("disabled",parseInt($this.value) < parseInt(this.value));
});
});
Check the fiddle here
EDIT
$this.value contains the value selected from "semester_credits" dropdown, now For each child of "skipped_total_credits", I am checking if that value is less than the children value then make it disabled, i.e attr("disabled", true) else make that children enabled.
I've created a quick function to help you out, there may be a neater way to do this, but it does the job quite nicely!
Onchange of the element #semester_credits I grab the value (number of semesters credits and then loop over the next select box and remove the ones that have a higher value that the chosen one, I use a global var to cache the removed options in case the user changes their minds and we need to add them back in.
$(function () {
var savedOpts = "";
$('#semester_credits').change(function() {
//Add all options back in;
if( savedOpts ) {
$('#skipped_total_credits').append(savedOpts);
savedOpts = "";
}
//Return false if blank option chosen;
if( $(this).val() === "0" )
return false;
var chosenCreds = parseInt($(this).val());
$('#skipped_total_credits option').each(function() {
var thisCred = parseInt($(this).val());
if(thisCred > chosenCreds) {
//Remove
savedOpts += $(this)[0].outerHTML;
$(this).remove();
}
});
});
Here an updated fiddle
p.s the example Kai Hartmann suggests is also a nice way to achieve this.
If you want the drop-down list for a question to change based on previous answer, you need to add an onchange event to each select element which would update another drop-down. This should then call a function which removes or adds elements in your form.
Otherwise, you can add a validation function for your Calculate button.
I am trying to make work my price estimator using jQuery and some basic javascript functions.
What I want to do is to change to value of my total variable, depending on the choices made in the dropdown menus. My prices aren't made from a unit price, so I need to set a price for a set of options. You'll understand by seeing my JS code (what I tried that is not working)
Here's my fiddle.
And here's my JS code :
var total=0;
$('#total span').text(total);
if (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "Front Only" && document.getElementById("quantitySelect").value == "500" && document.getElementById("turnaroundSelect").value == "4 days")
{
total=150;
}
Here's my HTML code :
<form id="calculator">
<center>
<label class="titleLabels">Business cards</label></center>
<label class="formLabels">Dimensions :</label>
<select id="sizeSelect" class="formSelects">
<option value="3.5x2">3.5" x 2"</option>
<option value="3.5x1.25">3.5" x 1.25"</option>
</select>
<label class="formLabels">Paper :</label>
<select id="paperSelect" class="formSelects">
<option value="14 PT 1" selected="selected">14 PT Cardstock Gloss</option>
<option value="14 PT 2">14 PT Cardstock Matte</option>
</select>
<label class="formLabels">Printed :</label>
<select id="printedSelect" class="formSelects">
<option value="Front Only" selected="selected">Front Only</option>
<option value="Front and Back">Front and Back</option>
</select>
<label class="formLabels">Quantity :</label>
<select id="quantitySelect" class="formSelects">
<option value="250">250</option>
<option value="500" selected="selected">500</option>
</select>
<label class="formLabels">Production :</label>
<select id="turnaroundSelect" class="formSelects">
<option value="5 days" selected="selected">5 days</option>
<option value="4 days">4 days</option>
</select>
<div id="totalBox">
<label class="formLabels" id="total"> Total : $<span></span></label>
</div>
<!-- hidden values -->
<input type="hidden" id="sizeSelect_value" value="50" name="formValues" />
<input type="hidden" id="paperSelect_value" value="20" name="formValues" />
<input type="hidden" id="printedSelect_value" value="0" name="formValues" />
<input type="hidden" id="quantitySelect_value" value="25" name="formValues" />
<input type="hidden" id="turnaroundSelect_value" value="5" name="formValues" />
</form>
Here's a working fiddle: http://jsfiddle.net/manishie/72Jbe/3/
Here's the revised Javascript:
var total=0;
$('#total span').text(total);
$('form').on('change', 'select', function() {
if (document.getElementById("paperSelect").value == "14 PT 1" && document.getElementById("printedSelect").value == "0" && document.getElementById("quantitySelect").value == "30" && document.getElementById("turnaroundSelect").value == "15")
{
total=150;
$('#total span').text(total);
}
});
First problem is that you were matching agains the text descriptions, not against the values for the second, third and fourth parts of the if statement.
Second problem was that you need to attach this to the change event for the select tags.
Third problem is that you weren't saving the new total after it changed.
Run the fiddle, and change the bottom value to 4 days and it will work.
You must actually change the line
<option value="14 PT 2">14 PT Cardstock Matte</option>
to
<option value="14 PT 2" selected="selected">14 PT Cardstock Matte</option>
And not just change the "value" of the Select.
You could do with:
$("#paperSelect option[selected=selected]").removeAttr("selected") ;
$("#paperSelect option[value=" + value + "]").attr("selected","selected") ;
edit: Just making things prettier