I am making a bookings page for a movie theater. I would like the user to be able to choose days in which movies are showing and then based off the day, the sessions that are available.
For example, the first drop-down menu displays movies currently showing. if someone wants to see Pixels, then the second drop down menu displays the days Pixels is showing. Once the user selects a day, then the third drop down menu will provide the times that Pixels is showing on that particular day.
<label>Movie Name:
<select id="movie" name="movie">
<option selected="selected" value="">Please select a movie</option>
<option value="Pixels">Pixels</option>
<option value="Straight_Outta_Compton">Straight Outta Compton</option>
<option value="Last_Cab_To_Darwin">Last Cab To Darwin</option>
<option value="Nicki_and_The_Flash">Nicki and The Flash</option>
</option>
</select>
</label>
</br>
<label>Session Day:
<select id="day" name="day">
<option selected="selected" value="">Please select...</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>
</label>
</br>
<label>Session Time:
<select id="time" name="time">
<option selected="selected" value="">Please select...</option>
<option value="1200">12:00</option>
<option value="1300">13:00</option>
<option value="1500">15:00</option>
<option value="1800">18:00</option>
<option value="2100">21:00</option>
</select>
</label>
Lets say Pixels shows on Mondays and Tuesdays and the only times it shows is at 13:00 and 18:00. How would i write the jQuery to provide this sort of functionality?
A quick exemple on how you can handle this :
JS
$("#movie").on("change", function(){
$("#day option, #time option").hide();
var days = $("option:selected", this).attr("data-days").split(",");
var times = $("option:selected", this).attr("data-times").split(",");
for(i=0; i<days.length; i++){
$("#day option[value="+days[i]+"]").show();
}
for(i=0; i<times.length; i++){
$("#time option[value="+times[i]+"]").show();
}
});
CSS
#day option, #time option{
display:none;
}
You have to store all informations about each movie in data-days and data-times attribute.
This way, once selected, you can retrieve all this informations, split them, and display corresponding <option>
Be carreful, you have a useless </option> tag at the end of your "#movie" <select></select>
Live Demo
Edit 1:
From your comment, the solution I can provide could look like this exemple
First, store all info in a data- attribute, like day1[time1,time2];day2[time1,time2] and so one.
After some split() & substring() on #movie .change() event, you can dynamically add specific options for the #day select tag (which will now look like <option value="Monday" data-times="13:00,18:00">Monday</option>).
Same as before, just make a function that will handle the data-times on #day .change() event to dynamically create the desired #time options
Related
I have this drop-down list of ethnicity.
What I want is when I select clear ethnicity it should not appear in select box, and like box should be empty.
How can i do that?
<select
#ethnicity
[(ngModel)]="patient.Ethnicity"
[class.text-dimmed]="!patient.Ethnicity"
name="ethnicity"
id="ethnicity"
class="form-control input-underline input-lg ml-0">
<option [ngValue]="null" disabled> Select </option>
<option [ngValue]="null">Clear ethnicity</option>
<option value="Alaska-Native">Alaska Native</option>
<option value="American-Indian">American-Indian</option>
<option value="Asian">Asian</option>
<option value="African-Americans">Black or African American</option>
<option value="Hispanic">Hispanic or Latino</option>
<option value="Jewish-Ashkenazi">Jewish - Ashkenazi</option>
<option value="Jewish-Other">Jewish - Other</option>
<option value="Native-Hawaiians">Native Hawaiian or Other Pacific Islander </option>
<option value="Other">Other </option>
<option value="Unknown">Unknown </option>
<option value="White-Caucasian">White or Caucasian</option>
</select>
like when I select it, it appears like this
but what I want is,
here is my demo
clear ethnicity should show in dropdown but when i select it it should not show in select box like i shared screen shots
What should I do to solve this situation ?
Thank you.
You can handle change event of select tag like this.
onChange(value) {
if(value == 'Clear ethnicity'){
this.Ethnicity = '';
}
<select
#ethnicity
[(ngModel)]="Ethnicity"
[class.text-dimmed]="!Ethnicity"
name="ethnicity" (change)="onChange($event.target.value)"
id="ethnicity"
class="form-control input-underline input-lg ml-0">
Demo: https://stackblitz.com/edit/angular-clear-option-select
All you have to do is delete the value "Clear ethnicity" like I did below:
<option [ngValue]="null" [hidden]="clear.selected"></option>
EDIT: post the question and magically it starts working :/ Maybe because I removed the alert?
So I have a dropdown selector that is supposed to represent the default for a set of dropdown selectors that make up a country list.
Here is one of the many code permutations I tried:
$("#edit-ip-ban-setdefault").change(function () {
var selected = this.selectedIndex
$(".form-type-select").each(function() {
$('.form-select').attr('selectedIndex', selected);
$(".form-select").val(selected).change();
});
});
Here is the relevant HTML for the default dropdown:
<select class="form-select valid" name="ip_ban_setdefault" id="edit-ip-ban-setdefault" selectedindex="1">
<option value="0"></option>
<option value="1"> Read Only </option>
<option selected="selected" value="2"> Complete Ban </option>
</select>
And here is the HTML for one of the many dropdowns I wish to have updated on change:
<div class="form-item form-type-select form-item-ip-ban-AF">
<select class="form-select valid" id="edit-ip-ban-af" name="ip_ban_AF">
<option selected="selected" value="0"></option>
<option value="1">Read Only</option>
<option value="2">Complete Ban</option>
</select>
</div>
I'm using jQuery 1.7, but ideally the solution would work for 1.5 to 1.10.
So I am a newbie on Wordpress working with a theme to make a car platform. Unfortunately, on the theme, the car-selling functionalities differ from what we need. One of those things is: show or hide options based on previous selection with dropdown lists.
Quick example: If 'BMW' is chosen on 'Make', then only show '1 series' '3 series' '5 series' on 'Model', if '3 series is chosen, then only show 318i 320i 330i on 'Engine', aso. From a logical point of view, it is so easy, but I have no clue how to translate this into code. Luckily, I've found pretty good code here already, but this works only for the next dropdown list. My question is, how does the javascript/jquery code have to look like so you can make more than 2 conditional dropdown lists? You could take Engine as an example. Thank you
HTML code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="req_make">Make</label>
<select id="req_make" name="make">
<option disabled="disabled" selected="selected" value="">Choose Make</option>
<option class="BMW" value="BMW">BMW</option>
<option class="Audi" value="Audi">Audi</option>
<option class="VW" value="VW">VW</option>
</select>
<label for="req_model">Model</label>
<select id="req_model" name="model">
<option disabled="disabled" selected="selected" value="">Choose model</option>
<option class="BMW" value="1er">1er</option>
<option class="BMW" value="3er">3er</option>
<option class="BMW" value="5er">5er</option>
<option class="BMW" value="7er">7er</option>
<option class="Audi" value="A4">A4</option>
<option class="Audi" value="A8">A8</option>
<option class="Audi" value="Q7">Q7</option>
<option class="VW" value="Golf">Golf</option>
<option class="VW" value="Touran">Touran</option>
</select>
<label for="req_engine">Engine</label>
<select id="req_engine" name="engine">
<option disabled="disabled" selected="selected" value="">Choose engine</option>
<option class="BMW" value="7er">7er - 730i</option>
<option class="BMW" value="7er">7er - 730Li</option>
<option class="BMW" value="7er">7er - 735i</option>
</select>
Javascript code:
$(function(){
$("#req_make").on("change",function(){
var levelClass = $('#req_make').find('option:selected').attr('class');
console.log(levelClass);
$('#req_model option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}
});
});
});
You can specify any number of selectors to combine into a single result. So change $('#req_model option').each(function () { ... to $('#req_model option, #req_engine option').each(function () { ... to solve this.
I just did it on my own. It is working, but of course I don't know if it's the right way to do it. I am taking the value of the former list and assigning it to the class of the next, while changing attr('class') to attr('value'). https://jsfiddle.net/agdkw1xm/
I have 4 selects on a page and only the first one is visible. Also, the first select has basic prompt string: Choose person like this:
<select name="post[person_id]">
<option value="">Choose person</option>
<option value="1">David</option>
<option value="2">Sam</option>
<option value="3">Tobias</option>
</select>
Once user chooses some option from the first dropdown, the other 3 selects have to be displayed.
How to implement it?
Here is a simple jquery solution. The key is to use the .change event and hook it up to your dropdown(s).
HTML
<select id="controllerDD">
<option value="">Select...</option>
<option value="Show 1">Show 1</option>
<option value="Show 2">Show 2</option>
<option value="Show All">Show All</option>
</select>
<p>DD 1</p>
<select id="DD1" style="display:none">
<option value="blah">Select...</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
</select>
<p>DD 2</p>
<select id="DD2" style="display:none">
<option value="blah">Select...</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
<option value="blah">blah</option>
</select>
JavaScript
$('#controllerDD').change(function (e) {
var selected = $(e.currentTarget).val();
$('#DD1').hide();
$('#DD2').hide();
switch (selected) {
case "Show 1":
$('#DD1').show();
break;
case "Show 2":
$('#DD2').show();
break;
case "Show All":
$('#DD1').show();
$('#DD2').show();
break;
default:
break;
}
})
You have to use onchange methods.
<select onchange="myFunction()">
<script>
function myFunction(){
// fetch new data for the next select.
//append the new options on next select.
// make select available or enabled
}
</script>
For the first select use the onchange to fetch (populate) the options of the next selects. And do the same for the following selects.
You can also fetch and make it available in the instance you finish to populate the select.
In case you are not using jQuery. You can append the option
This code looks at if dropdownlist with 'townid' has an option of Central and then puts Central after the first option at all dropdownlists.
var central = $('#townid option:contains("Central")');
if(central){
central.insertAfter('select option:first-child');
}
My problem is that:
How can I add it just after dropdownlist that has id of townid? I mean something like:
var central = $('#townid option:contains("Central")');
if(central){
central.insertAfter('#townid select option:first-child');
}
For example:
<select id=townid>
<option value="5000">AL</option>
<option value="5001">NY</option>
<option value="5002">LA</option>
<option value="5003">NY</option>
<option value="5204">Central</option>
<option value="5024">FA</option>
</select>
<select id="someid">
<option value="3002">Brooklyn</option>
<option value="6001">Manhattan</option>
</select>
After that process they should be seem like:
<select id=townid>
<option value="5000">AL</option>
<option value="5204">Central</option>
<option value="5001">NY</option>
<option value="5002">LA</option>
<option value="5003">NY</option>
<option value="5024">FA</option>
</select>
<select id="someid">
<option value="3002">Brooklyn</option>
<option value="6001">Manhattan</option>
</select>
How can I add it just after dropdownlist that has id of townid?
Okay, I’m gonna assume your HTML looks something like this:
<select id="townid">
<option>
…
</option>
</select>
In that case, you could use:
$('#townid option:contains("Central")').appendTo('#townid option');
If there are multiple option elements inside #townid and you only want to select the first, just change the selector:
$('#townid option:contains("Central")').appendTo('#townid option:first');
In your example, don’t use if (central), use if (central.length) instead.
You just messed up the selector, because #townid IS the select tag.
var central = $('#townid option:contains("Central")');
if(central.length === 1){
central.insertAfter('#townid option:first-child');
}