I am using the HTML <select> for selecting options. The first value in my select is selected. For all of these options I have a javascript that runs different scripts.
When I change the value to 2 the javascript runs the script for value 2 (dataEl.value === "2") { outputEl.innerHTML = '<div>result option two</div>';
The script works only when the value is changed and does not show the script for value 1 when the selected option is not changed.
Does someone know how I can solve this?
Here is my script:
JSFiddle
https://jsfiddle.net/yua9vanz/
HTML
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control select2" id="select" name="select" style="width: 100%;">
<option selected="selected" value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
</div>
</div>
<p id="output1"></p>
<script type="text/javascript">
var dataEl = document.querySelector('#select'),
outputEl = document.querySelector('#output1');
dataEl.onchange = function() {
if (dataEl.value === "1") {
outputEl.innerHTML = '<div>result option one</div>';
} else if (dataEl.value === "2") {
outputEl.innerHTML = '<div>result option two</div>';
} else if (dataEl.value === "3") {
outputEl.innerHTML = '<div>result option three</div>';
}
};
</script>
This is what I meant:
var dataEl = document.querySelector('#select'),
outputEl = document.querySelector('#output1');
dataEl.onchange = function() {
if (dataEl.value === "1") {
outputEl.innerHTML = '<div>result option one</div>';
} else if (dataEl.value === "2") {
outputEl.innerHTML = '<div>result option two</div>';
} else if (dataEl.value === "3") {
outputEl.innerHTML = '<div>result option three</div>';
}
};
dataEl.onchange();
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control select2" id="select" name="select" style="width: 100%;" onchange="check()">
<option selected="selected" value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
</div>
</div>
<p id="output1"></p>
I think this is what you want, I modified the code a bit, but in summary, I just added the onload event in the element(#select).
var dataEl = document.querySelector('#select'),
outputEl = document.querySelector('#output1');
dataEl.addEventListener("load", check());
function check() {
if (dataEl.value === "1") {
outputEl.innerHTML = '<div>result option one</div>';
} else if (dataEl.value === "2") {
outputEl.innerHTML = '<div>result option two</div>';
} else if (dataEl.value === "3") {
outputEl.innerHTML = '<div>result option three</div>';
}
}
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
<div class="col-md-9 col-sm-9 col-xs-12">
<select class="form-control select2" id="select" name="select" style="width: 100%;" onchange="check()">
<option selected="selected" value="1">Option one</option>
<option value="2">Option two</option>
<option value="3">Option three</option>
</select>
</div>
</div>
<p id="output1"></p>
You should add onclick event (and optionally onkeypressto detect keyboard navigation).
Just to clarify what the selectedattribute does (source: W3C):
When present, it specifies that an option should be pre-selected when
the page loads.
The pre-selected option will be displayed first in the drop-down list.
So, if you want to run the script without user intervention, simply run it:
dataEl.onchange();
Another solution, though not ideal, is the following:
var dataEl = document.querySelector('#select');
showResult(dataEl);
dataEl.onchange = function() {
showResult(dataEl);
};
function showResult(selector) {
var outputEl = document.querySelector('#output1');
if (selector.value === "1") {
outputEl.innerHTML = '<div>result option one</div>';
} else if (selector.value === "2") {
outputEl.innerHTML = '<div>result option two</div>';
} else if (selector.value === "3") {
outputEl.innerHTML = '<div>result option three</div>';
}
}
All it does is call a function to get the selected value, both at page load and when the selected value changes.
Related
I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.
If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />
var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>
Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />
Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**
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
}
When we select Anesthesiology in first input, the second input should only show Anesthesiology doctors, when we select Cardiology it should only show Cardiology doctors and so on. Should I use Javascript or jQuery for this? Please help me to find out solution for this. Thank you.
HTML
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option selected>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
<option>Anesthesiology doctor 1</option>
<option>Anesthesiology doctor 2</option>
<option>Cardiology doctor 1</option>
<option>Cardiology doctor 2</option>
<option>Dermatology doctor 1</option>
<option>Dermatology doctor 2</option>
</select>
</div>
Try use the following example,
This will hide all options and only show those that contains the value from dept dropdown
var v = $(this).val()
$("#doctors option").hide()
$("#doctors option:contains(" + v + ")").show()
This will then automatic set the first visible element to be selected, so it updates the dropdown of doctors
$('#doctors option').each(function () {
if ($(this).css('display') != 'none') {
$(this).prop("selected", true);
return false;
}
});
$('#dept').change(function() {
var v = $(this).val()
$("#doctors option").hide()
$("#doctors option:contains(" + v + ")").show()
$('#doctors option').each(function () {
if ($(this).css('display') != 'none') {
$(this).prop("selected", true);
return false;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option selected>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
<option>Anesthesiology doctor 1</option>
<option>Anesthesiology doctor 2</option>
<option>Cardiology doctor 1</option>
<option>Cardiology doctor 2</option>
<option>Dermatology doctor 1</option>
<option>Dermatology doctor 2</option>
</select>
</div>
This will update second dropdown when first will change.
(function () {
var $dept = $('#dept');
var $doctors = $('#doctors');
$dept.on('change', onDocSelected)
function onDocSelected() {
var selected = $dept.val();
$doctors.find('option').each(function (i, opt) {
toggle(selected, opt)
});
}
function toggle(selected, opt) {
var isApplicable = opt.text.indexOf(selected) !== -1;
return isApplicable ? $(opt).show() : $(opt).hide();
}
}($))
Apply a class to the options of the second select list - and on change of the first select - hide all optionsand then show only those with the corresponding class.
$(document).ready(function(){
$('#dept').change(function(){
var specialty = $(this).val();
$('#doctors').val(0);
$('#doctors option').hide();
$('.'+ specialty).show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-12">
<label> Select a specialty</label>
<select id="dept" name="departments">
<option></option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<label> Select a Doctor</label>
<select id="doctors" class="form-control">
<option></option>
<option class="Anesthesiology">Anesthesiology doctor 1</option>
<option class="Anesthesiology">Anesthesiology doctor 2</option>
<option class="Cardiology">Cardiology doctor 1</option>
<option class="Cardiology">Cardiology doctor 2</option>
<option class="Dermatology">Dermatology doctor 1</option>
<option class="Dermatology">Dermatology doctor 2</option>
</select>
</div>
check this
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option></option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
</select>
</div>
script for above selection
$(document).ready(function(){
var docotors = ['Anesthesiology doctor 1','Anesthesiology doctor 2','Cardiology doctor 1','Cardiology doctor 2','Dermatology doctor 1'];
$("#dept").on("change",function(){
var selectdDept = $(this).val();
$("#docotrs").empty();
docotors.forEach(function (i) {
if(i.indexOf(selectdDept) >= 0){
$("#doctors").append('<option>'+i+'</option>');
}
});
});
});
If you have doctors name list than create an JSON object by the below method and access it by the selected department value
$(document).ready(function(){
var docotors = {'Anesthesiology':['Anesthesiology doctor 1','Anesthesiology doctor 2'],'Cardiology':['Cardiology doctor 1','Cardiology doctor 2'],'Dermatology':['Dermatology doctor 1']};
$("#dept").on("change",function(){
var selectdDept = $(this).val();
$("#doctors").empty();
if(selectdDept){
var selectedDeptDocotors = docotors[""+selectdDept+""];
selectedDeptDocotors.forEach(function(i){
$("#doctors").append('<option>'+i+'</option>');
});
}
});
});
If you want to do with pure javascript, you may try this
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments" onchange="showOptions(this)">
<option>Select option</option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
</select>
</div>
SCRIPTS:
var Anesthesiology = [
{ text: "Anesthesiology doctor 1" },
{ text: "Anesthesiology doctor 2" }];
var Cardiology = [
{ text: "Cardiology doctor 1" },
{ text: "Cardiology doctor 2" }];
var Dermatology = [
{ text: "Dermatology doctor 1" },
{ text: "Dermatology doctor 2" }];
function showOptions(e) {
var userSelection = e.options[e.selectedIndex].text;
switch (userSelection) {
case 'Anesthesiology':
options(Anesthesiology);
break;
case 'Cardiology':
options(Cardiology);
break;
case 'Dermatology':
options(Dermatology);
break;
default:
document.getElementById('doctors').innerHTML = "";
break;
}
}
function options(arr) {
var selectList = document.getElementById('doctors');
var len = selectList.options.length;
for (var i = 0; i < arr.length; i++) {
for (j = 0; j < len; j++) {
selectList.options[j] = null;
}
var option = document.createElement("option");
option.text = arr[i].text;
selectList.appendChild(option);
}
}
I basically want an image to appear if a car is chosen in the drop down.Every time I alter the code the if statements stop working and the image never appears. I'm new to coding and am not sure how to go about it. Any help would be appreciated.
HTML
<script src="Script\configurator.js" type="text/javascript"></script>
<a> First Select a Car Make </a>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission(this.value);">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" >
<option value="0" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
</form>
Javascript
function Transmission(Car) {
var make = document.CarConfigurator.A_M;
make.options.length = 0;
if (Car == "1") {
make.options[make.options.length] = new Option('Automatic', '1');
make.options[make.options.length] = new Option
('Manual', '2');
}
if (Car == "2") {
make.options[make.options.length] = new Option('Manual', '2');
}
if (Car == "3") {
make.options[make.options.length] = new Option('Automatic', '3');
}
}
I change some of your code, because I can't use it. Try this.
<form name="CarConfigurator">
<select name="Car_make">
<option value="" selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" >
<option value="0" selected="selected">None</option>
<option value="1">Automatic</option>
<option value="2">Manual</option>
</select>
</form>
<br>
<br>
<img id="carImage" style="width:500px">
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
function transmission(car, option) {
if (car == "1" && option == "1") { // Audi RS6 | Automatic
$("#carImage").attr('src',"https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Audi_RS6_-_Mondial_de_l'Automobile_de_Paris_2014_-_001.jpg/280px-Audi_RS6_-_Mondial_de_l'Automobile_de_Paris_2014_-_001.jpg");
} else if (car =="2" && option == "2") { // BMW M4 | Manual
$("#carImage").attr('src',"http://buyersguide.caranddriver.com/media/assets/submodel/7774.jpg");
} else if (car == "3" && option == "1") { // Mercedes C63 AMG | Automatic
$("#carImage").attr('src',"http://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/styles/gallery_slide/public/mercedes-benz-c63-amg-1.jpg?itok=yHBoS8gg");
} else {
$("#carImage").attr('src',"");
}
}
$("select").on("change",function(){
var selectCar = $("select[name=Car_make]");
var selectCarOption = $("select[name=A_M]");
transmission(selectCar.val(), selectCarOption.val());
});
</script>
I have multiple select dropdown in a modal window that prepopulates based on identical select dropdowns on the main page (I am using Foundation 4). On both dropdown menus, there is a certain combination that the user cannot pick. I have all this working, except when the modal window comes up the user can make an illegal selection at first, unless they change the option and then try to change it again. I need it to make the illegal option greyed out when the modal window pops up, and not after they change the selection on the modal window like I have it now. Can anyone help me?
Here is the HTML:
<!-- THE ON-PAGE DROPDOWN -->
<div id="choose">
<h1><strong>Choose your FREE bag of Coffee</strong></h1>
<!--START BLENDS-->
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="blend1" id="blend1">
<option value="">Choose Blend</option>
<option value="">—————</option>
<option value="1"> Light</option>
<option value="2">Medium</option>
<option value="3">Dark</option>
<option value="4">Robust</option>
<option value="5">French Vanilla</option>
<option value="6">Caramel Vanilla</option>
<option value="7">Hazelnut & Cinnamon</option>
<option value="8">Passionata — Chocolate Truffles</option>
</select>
</div>
</div>
<!--END BLENDS-->
<fieldset>
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="grind1" id="grind1">
<option value="">Choose Grind</option>
<option value="">—————</option>
<option value="1">Ground</option>
<option value="2">Whole Bean</option>
</select>
</div>
</div>
<div class="clearfix"></div>
<div class="row register">
<p class="large-1 columns " style="text-align:right;"><em>*</em></p>
<div class="large-11 columns">
<select name="type1" id="type1">
<option value="">Choose Type</option>
<option value="">—————</option>
<option value="1">Regular</option>
<option value="2">Decaf</option>
</select>
</div>
</div>
</fieldset>
</div>
<!-- END OF MAIN PAGE DROPDOWN -->
<!-- MODAL WINDOW HTML -->
<div class="choice" >
<select name="blend2" id="blend2">
<option value="">Choose Blend</option>
<option value="">—————</option>
<option value="1">Light</option>
<option value="2">Medium</option>
<option value="3">Dark</option>
<option value="4">Robust</option>
<option value="5">French Vanilla</option>
<option value="6">Caramel Vanilla</option>
<option value="7">Hazelnut & Cinnamon</option>
<option value="8">Chocolate Truffles</option>
</select>
</div>
<div class="choice2">
<select name="grind2" id="grind2">
<option value="">Choose Grind</option>
<option value="">—————</option>
<option value="1">Ground</option>
<option value="2">Whole Bean</option>
</select>
<select name="type2" id="type2">
<option value="">Choose Type</option>
<option value="">—————</option>
<option value="1">Regular</option>
<option value="2">Decaf</option>
</select>
</div>
Here is the JS/jQuery:
<script>
$("#blend1").change(function () {
if ($(this).val() == "1") {
$("#blend2").val("1");
}
if ($(this).val() == "2") {
$("#blend2").val("2");
}
if ($(this).val() == "3") {
$("#blend2").val("3");
}
if ($(this).val() == "4") {
$("#blend2").val("4");
}
if ($(this).val() == "5") {
$("#blend2").val("5");
}
if ($(this).val() == "6") {
$("#blend2").val("6");
}
if ($(this).val() == "7") {
$("#blend2").val("7");
}
if ($(this).val() == "8") {
$("#blend2").val("8");
}
});
$("#grind1").change(function () {
if ($(this).val() == "1") {
$("#grind2").val("1");
}
if ($(this).val() == "2") {
$("#grind2").val("2");
}
});
$("#type1").change(function () {
if ($(this).val() == "1") {
$("#type2").val("1");
}
if ($(this).val() == "2") {
$("#type2").val("2");
}
});
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("select[name='grind1']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='type1'] option[value=2]").attr('disabled', true);
} else {
$("select[name='type1'] option[value=2]").attr('disabled', false);
}
});
$("select[name='type1']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='grind1'] option[value=2]").attr('disabled', true);
} else {
$("select[name='grind1'] option[value=2]").attr('disabled', false);
}
});
});
</script>
<!-- NO BONUS UPSELL -->
<script language="javascript" type="text/javascript">
$.noConflict();
$(document).ready(function() {
$("select[name='grind2']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='type2'] option[value=2]").attr('disabled', true);
} else {
$("select[name='type2'] option[value=2]").attr('disabled', false);
}
});
$("select[name='type2']").on("change", function(e) {
if ($('option:selected', this).val() == 2) {
$("select[name='grind2'] option[value=2]").attr('disabled', true);
} else {
$("select[name='grind2'] option[value=2]").attr('disabled', false);
}
});
});
</script>
If anyone could help me, that would be fantastic!