I'm looking to make a series of select boxes in html which show different options depending on what has already been selected. I can get the first two to work but can't work out why it's not injecting into the last box here, the #FCadultseats select box.
I basically want the FCadultseats box to be available only when the movie is in the big cinema (at 9pm).
Thanks a lot for any and all help. I've been trying for ages and dont know why this wont work.
Here's my code:
<form id = "booking" method = "POST" action = "testserver">
Day:
<select id = "dayselector" name = "day">
<option disabled selected> -- Select a Day -- </option>
<option value= "Monday">Monday </option>
<option value = "Tuesday">Tuesday</option>
<option value = "Wednesday">Wednesday</option>
<option value = "Thursday">Thursday</option>
<option value = "Friday">Friday</option>
<option value = "Saturday">Saturday</option>
<option value = "Sunday">Sunday</option>
</select>
<br>
Time and Cinema:
<select id ="timeselector" name ="time">
<option disabled selected> -- Select a Time -- </option>
</select>
First Class Adults: <select id ="FCadultseats">
<option disabled selected> -- Not Available -- </option>
</select>
</form>
$(document).ready(function(){
$("#dayselector").change(function(){
var sel_day = $('option:selected').val();
if (sel_day == "Saturday" || sel_day == "Sunday"){
$("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option><option value ="4">4pm - Small Cinema</option>');
} else {
$("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option>');
}
});
$("#timeselector").change(function(){
var sel_time = $('option:selected').val();
if (sel_time == 9){
$("#FCadultseats").html('<option value ="0">0</option><option value ="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>');
}
});
});
Try changing
var sel_day = $('option:selected').val();
to
var sel_day = this.value;
and do that in both places.
$('option:selected') selects ALL the selected options on the page, for every select.
Related
I want to achieve:
If I select "16" in first select box and bigger value in second, for example "17", then in second select automatically changing to "16".
Just if value in first select box is lower than second, always change to same values, for example 16 to 16, 18 to 18.
<select id="from_age_js" name="from_age" class="select-advertise-style">
<option value="f13">13</option>
<option value="f14">14</option>
<option value="f15">15</option>
<option value="f16">16</option>
<option value="f17">17</option>
<option value="f18" selected>18</option>
<option value="f19">19</option>
<option value="f20">20</option>
</select>
—
<select id="to_age_js" name="to_age" class="select-advertise-style">
<option value="t13">13</option>
<option value="t14">14</option>
<option value="t15">15</option>
<option value="t16">16</option>
<option value="t17">17</option>
<option value="t18">18</option>
<option value="t20" selected>20+</option>
</select>
That's an easy one, in your case, with pure javascript, I would do something like this:
function checkit()
{
//Store the two dropdowns for easy reference
var fromAge = document.getElementById('from_age_js');
var toAge = document.getElementById('to_age_js');
//Verify if the toAge value is minor, to see if the conditional code will be executed
if( fromAge.options[fromAge.selectedIndex].value >
toAge.options[toAge.selectedIndex].value)
{
//In that case, match the values to be the same...
document.getElementById('to_age_js').value =
fromAge.options[fromAge.selectedIndex].value;
}
}
And you just have to add that function to where you want it to be called. I would choose to add the onchange event from Javascript within the select dropdowns. Like this:
<select id="from_age_js" name="from_age" class="select-advertise-style" onchange="checkit();">
You can see a working example here:
https://jsfiddle.net/8cmad3tz/19/
I am working on a Drop Down Select element which have 3 options lets name it as X,Y,Z having values 1,2,3 respectively.Now my question is to how to set a conditions or what to do next to show graph every time when i select option as earlier it only shows the graph of first option which i select first because of onchange function occured already.
Try this code. This will give you current option selected, based on which you can perform your next operations.
HTML:
<select id="select" onchange="onOptionChange();">
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
JS:
function onOptionChange() {
console.log($('#select').val()); //prints current option selected
}
<select id="ddrp1">
<option value="">Select an option</option>
<option value="1">X</option>
<option value="2">Y</option>
<option value="3">Z</option>
</select>
Assuming an id for dropdown select is ddrp1.
$("#ddrp1").on("change", function() {
var selectedVal = this.value;
var selectedText = this.options[this.selectedIndex].text;
var selectedVal = $(this).find(':selected').val();
var selectedText = $(this).find(':selected').text();
// set your condition here based on selectedText or selectedVal to display graph
});
I have an html5 page where I want to set the value of a dropdown menu based on a hidden field but its not working.
function checkPayAdd() {
var i;
var PayAddOption =document.querySelectorAll('input[name="PayAddOption"]');
for ( i = 0; i < PayAddOption.length; i++) {
if (PayAddOption[i].checked == true) {
switch(i)
{
case 0:
document.getElementById("BillingAddress1").value = document.getElementById("Contact_Address1").value;
document.getElementById("BillingAddress2").value = document.getElementById("Contact_Address2").value;
document.getElementById("BillingCity").value = document.getElementById("Contact_City").value;
document.getElementById("BillingProv").selectedIndex = document.getElementById("First_Corp_Director_Prov").value;
document.getElementById("BillingPostalCode").value = document.getElementById("Contact_Postal").value;
document.getElementById("BillingCountry").selectedIndex = document.getElementById("First_Corp_Director_Country").value;
break
I set the values of the hidden field in the same format as those in the drop downs - ie. Province value in hidden field is: "AL" which should then set the Billing.Prov dropdown value to the same. These are the hidden fields
<input type="hidden" name="First_Corp_Director_Province" id="First_Corp_Director_Province" value="AL">
<input type="hidden" name="First_Corp_Director_Country" id="First_Corp_Director_Country" value="US">
<select name="BillingProv" id="BillingProv" class="form-control">
<option value="">select State or Province (Canada/US Only)</option>
<option value="ZZ">Outside US or Canada</option>
<optgroup label="United States">
<option id="USA-AL" value="AL">Alabama (AL)</option>
<option id="USA-AK" value="AK">Alaska (AK)</option>
<option id="USA-AZ" value="AZ">Arizona (AZ)</option>
Any help would be appreciated!
There are 2 errors here
You should be assigning to the value of the select element instead of selectedIndex.
The id of hidden field is wrong. Should be First_Corp_Director_Province instead of
First_Corp_Director_Prov.
so the replace your 4th line of switch case 0 with
document.getElementById("BillingProv").value = document.getElementById("First_Corp_Director_Province").value;
and 6th line with
document.getElementById("BillingCountry").value = document.getElementById("First_Corp_Director_Country").value;
I have three select tags in HTML with option tag.I want to establish relationship between option tags of different select tag.
EDIT-1
When I choose Reference-1 from select name="reference" then 2014-10-10 07:17:00 and 2014-10-10 08:46:00 from select name="from" and select name="to" should only be present in the dropdown list.When I choose Reference-2 then 2014-09-01 10:00:00 and 2014-09-01 11:00:00 should only be present in dropdown list of from and to select tag. My html code for is-
<form method="post">
Select Reference:
<select name="reference">
<option value="Select">Select</option>
<option value="Reference-1">Reference-1;</option>
<option value="Reference-2">Reference-2</option>
<option value="Reference-3">Reference-3</option>
<option value="Reference-4">Reference-4</option>
</select>
From Date:
<select name="from">
<option value="Select">Select</option>
<option value="2014-10-10 07:17:00">2014-10-10 07:17:00</option>
<option value="2014-09-01 10:00:00">2014-09-01 10:00:00</option>
<option value="2014-09-08 10:00:00">2014-09-08 10:00:00</option>
</select>
To Date:
<select name="to">
<option value="Select">Select</option>
<option value="2014-10-10 08:46:00">2014-10-10 08:46:00</option>
<option value="2014-09-01 11:00:00">2014-09-01 11:00:00</option>
<option value="2014-09-08 10:00:00">2014-09-08 11:00:00</option>
</select><br>
<b>Select Date to be compared</b>
<p>Date: <input type="text" id="datepicker"></p>
<input type="submit" value="Submit"><br>
</form>
Get the index of the selected option from reference select element and then disable all the options of from and to select elements except the option with index of the previous index you got from reference select option.
javaScript Solution :
var reference = document.getElementsByName("reference")[0];
var fromSelect = document.getElementsByName("from")[0];
var toSelect = document.getElementsByName("to")[0];
reference.onchange = function(){
var selectedIndex = this.selectedIndex;
for(var i = 1; i <= fromSelect.length; i++){
if(i != selectedIndex){
fromSelect.getElementsByTagName("option")[i].disabled = true;
toSelect.getElementsByTagName("option")[i].disabled = true;
} else{
fromSelect.getElementsByTagName("option")[i].disabled = false;
toSelect.getElementsByTagName("option")[i].disabled = false;
}
}
};
jsFiddle
jQuery Solution :
$("select[name='reference']").on("change", function(){
var $fromSelect = $("select[name='from']");
var $toSelect = $("select[name='to']");
var selectedIndex = $(this).children("option:selected").index();
$fromSelect.children("option").removeAttr("disabled");
$toSelect.children("option").removeAttr("disabled");
$fromSelect.children("option").not(":eq(" + selectedIndex +")").prop("disabled", "disabled");
$toSelect.children("option").not(":eq(" + selectedIndex +")").prop("disabled", "disabled");
});
jsFiddle
If second selection values are dependent on the first selection option, then you should disable the whole second selection until the first one is selected.
When the first one is selected then disable all the unrelated options in second selection and make it enabled to the user. Let me know if it helped.
$("select[name='reference']").on('change', function() {
var value = $(this).val(); // first selection value
if ("Reference-1" == value ) {
var $selection2 = $("select[name='from']");
$selection2.find("option[value*='2014-09-01 10:00:00']").prop('disabled',true);
$selection2.find("option[value*='2014-09-08 10:00:00']").prop('disabled',true);
}
...
});
Here is DEMO
I have a dynamic number of dropdowns. When a value is selected in the first dropdown, the value of the second and so on dropdowns will be the same with the first dropdown. But the user has the option to change the value of the second and so on dropdowns, but not changing the first and other dropdown's value.
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
<select name="dropdown[]">
<option value="1">Sony</option>
<option value="2">Nintendo</option>
<option value="3">Microsoft</option>
</select>
How can I achieve this using javascript or jquery libraries?
You can attach a listener to the first select element:
var selects = document.querySelectorAll('select[name="dropdown[]"]');
selects[0].addEventListener('change', function () {
for (var i = 0; i < selects.length; i++) {
selects[i].value = selects[0].value;
}
});
When the value of only the first select changes, it updates the values of the other selects. This way does not rely on any 3rd-party libraries.
Demo: http://jsfiddle.net/cuefb9ag/
Use a change event and then alter the other dropdowns:
$("select[name=dropdown\\[\\]]").change(function() {
var value = this.value;
$("select[name=dropdown\\[\\]]").not(this).val(value);
});
Demo: http://jsfiddle.net/awv14f6r/1/
If you want to change them in order (first alters the second, etc) - use next along with this
$(this).next("select").val(value);
var id = $('#DropDownID1 option:selected').val();
var textValue = $('#DropDownID1 option:selected').text();
$('#DropDownID2').prop('selectedIndex', 0);
$('#DropDownID2').select2('data', {
val: id,
text: textValue
});
$('#DropDownID2 option:selected').val(id);
}