I am trying to generate a list of options in a select dynamically based on the selection in another select by referencing a value in an array of objects.
<select id="radar">
<option value="15">City1</option>
<option value="64">City2</option>
</select>
<select id="beam">
</select>
Objects:
var radars = {
"city1": {
"name": "city1",
"maxBeams": 16
},
"city2": {
"name": "city2",
"maxBeams": 3
}
}
When a radar option is selected for example City2, I would like to fill the beam select with an option for as many maxBeams that have thee option value and text to simply be that index number:
<select id="beam">
<option value="1">1 </option>
<option value="2">2</option>
<option value="3">3</option>
</select>
What is the simplest way to accomplish this and make it easy to update?
You really shouldn't be using javascript to dynamically generate content like this. You should be using a framework like Vue.js, React, or Angular. You can homebrew a solution directly with javascript but you're just adding to your technical debt.
You should be doing something like this:
<div vue="app">
<select v-model="city_group">
<option disabled value="">Please select one</option>
<option v-for="c in cities">{{c}}</option>
</select>
<select v-if="city_group != ''" v-model="city">
<option disabled value="">Please select one</option>
<option v-for="c in city_info[city_group]">{{c}}</option>
</select>
<h1>My city group is {{city_group}}</h1>
<h1>My city is {{city}}</h1>
</div>
Notice how the content is based on data.
https://codepen.io/Snorghma/pen/QWWjOmq
https://v2.vuejs.org/v2/guide/forms.html#Select
https://v2.vuejs.org/v2/guide/list.html
Related
I have a drop-down box in HTML showing three options. I am also using javaScript and want to use the getElementById tool to connect the two. However, I only have one ID for the drop-down box. How does javascript recognize that I have three different options?
There's actually a demo on w3schools.com showing exactly what you're asking. To get the number of options, you could do something like
document.getElementById("mySelect").options.length
Here is an example of how to retrieve the value of a dropdown: https://jsfiddle.net/ykcwgnm8/
You use getElementBy* functions to get the element, however value attribute denotes which item is currently selected.
HTML:
<select id="dropdown">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
JS:
function onChangeHandler(e)
{
alert("you have selected item with value "+this.value);
}
document.getElementById("dropdown").addEventListener("change", onChangeHandler);
You can listen for change like this
var list = document.getElementById("mySelect")
list.addEventListener('change', function(e){
console.log(e.target.selectedIndex)
console.log(e.target.options[e.target.selectedIndex].text)
})
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
You can do something like this, here is an example:-
html
<select id="selectBox">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>
js
var e = document.getElementById("selectBox");
var selectedValue = e.options[e.selectedIndex].value;
// this will give selectedValue as 2
Hope you find this useful!!
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.
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
I'm using Angular to create a select element with options:
<select ng-model="mySelectedValue"
ng-options="myListItem.name as myListItem.name for myListItem in myList">
</select>
For the data:
$scope.myList = [
{ name: "option one" },
{ name: "option two" }
];
$scope.mySelectedValue = null;
This renders:
<select ...>
<option value='0'>option one</option>
<option value='1'>option two</option>
</select>
The value attribute can be changed to duplicate the option text using `track by myListItem.name, rendering:
<select>
<option value='option one'>option one</option>
<option value='option two'>option two</option>
</select>
But, there appears to be no way in Angular to prevent the value attribute being added to the options. ie: The following is valid HTML but cannot be rendered using Angular ng-options (as far as I can tell) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option?#attr-value
<select>
<option>option one</option>
<option>option two</option>
</select>
Using an ng-repeat on the options is apparently not recommended due to issues on IE - https://github.com/angular/angular.js/issues/2809
Is this a limitation of Angular?
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');
}