I am trying to add options to a select drop down list. I am doing this dynamically with js.
When I do this with one select list it works but I need to dynamically add more select list as the user wants to add more sets.
My one list works just fine like this:
<body>
<select class="js-example-basic-single" name="state"></select>
</body>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
load_workout_lst({{workout_list | tojson}});
let lst = {{workout_list | tojson}};
let e = document.getElementsByName('state');
console.log(e);
for(var i = 0, l = lst.length; i < l; i++){
var option2 = lst[i];
e[0].options.add(new Option(option2));
}
</script>
I notice when I console.log(e) I get a NodeList. Since I know there is only one item in that list I choose the first one. I access its options and add to it. It works great.
When I add the select menu dynamically I do this:
let exercise = $("#exercise");
var input;
var input = $("<select>").attr("type", "text").attr("name", exerciseName).attr("tabindex", tabIndexNum);
var br = $("<br>");
exercise.append(br);
exercise.append(input);
input.select2();
console.log(input);
for(var i = 0, l = workout_lst.length; i < l; i++){
console.log(workout_lst[i]);
var item = workout_lst[i];
input.options.add(new Option(item));
}
tabIndexNum++;
var workout_lst = [];
function load_workout_lst(lst){
for (let i = 0; i < lst.length; i++){
workout_lst.push(lst[i]);
}
}
Error:
Uncaught TypeError: input.options is undefined
When I console.log(input) here I get an Object. I'm sure that this is my problem I just don't know how to push or add to the Object. Is there a different way I need to be adding to an object? What am I doing wrong here?
I found the official select2 documentation very simple when it comes to managing options. For example, you can use the code snippet below to append and select option. For more details, i have left a reference.
var data = {
id: 1,
text: 'Barn owl'
};
var newOption = new Option(data.text, data.id, true, true);
$('#mySelect2').append(newOption).trigger('change');
Reference:
https://select2.org/programmatic-control/add-select-clear-items
Related
I am using dexie.js, which is an indexDB wrapper. Anywhoo, I have an array that is called from the user's local storage, and my function is supposed to iterate through every list item in the DB and show it. However, upon clicking on my Butane it only shows the most recent input of name.
Note: You can see the entire database by adding a few values in and checking your local storage.
My JsFiddle:
https://jsfiddle.net/enzp3zws/1/
my html:
<ul id="mane"></ul>
my js:
var db = new Dexie("TestDatabase");
db.version(1).stores({
friends: '++id, name, age'
});
var collection = db.friends;
var placement = document.getElementById('rainman');
var jacement = document.getElementById('rainboy');
var stacement = document.getElementById('mane');
var listed = document.createElement('li');
function addrain(){
collection.each(function(friend){
var element = [friend.name];
for (var i = 0; i < element.length; i++){
listed.textContent = element[i];
document.getElementById('mane').appendChild(listed);
//alert(element); <-- this call alerts all names in database.
}
});
}
Please excuse the randomness of some of these variable names. I don't know what sleep is anymore.
You need to create a new 'li' element each time:
//Remove var listed = ... line in header, then:
function addrain(){
collection.each(function(friend){
var element = [friend.name];
for (var i = 0; i < element.length; i++){
var listed = document.createElement('li');
listed.textContent = element[i];
document.getElementById('mane').appendChild(listed);
}
//alert(element); <-- this call alerts all names in database.
});
}
The reason your code did not work before is that you only created one li element, and repeatedly changed its text and re-inserted it at different locations.
I get an Uncaught TypeError: Cannot read property 'value' of undefined, where undefined is an array, after I perform a function that add/removes a class to an object in that array.
The code:
var tabs = document.getElementsByClassName("et_pb_tab");
var toggles = document.getElementById("tabsacc").getElementsByClassName("et_pb_toggle");
for (var i = 0; i < toggles.length; i++) {
toggles[i].onclick = function() {
var active = document.querySelector(".et_pb_active_content");
active.classList.remove("et_pb_active_content", "et-pb-active-slide");
var num = this.className.slice(-1);
tabs[num].classList.add("et_pb_active_content", "et-pb-active-slide");
};
}
I am basically trying to combine an accordion and tabs on a site that I'm still getting familiar with. The jQuery library is too old to use some current functions and I haven't updated it yet.
Site is: http://www.aberdeenservices.com/ci-data-tabs
I realized that I wrote the code to find the last character of a string of classes, but the tabs module rearranged the order and caused an error. I instead used "search()" to find the index of the class I wanted, added the length, and used "charAt()" to get the number at the end of the class. Thanks guys, the finished code will be at the links below and I've attached my code snippet.
<script>
var tabs = document.getElementsByClassName("et_pb_tab");
var toggles = document.getElementById("tabsacc").getElementsByClassName("et_pb_toggle");
for (var i = 0; i < toggles.length; i++) {
toggles[i].onclick = function() {
var active = document.querySelector(".et_pb_active_content");
active.classList.remove("et_pb_active_content","et-pb-active-slide");
var thisclass = this.className;
var substrclass = thisclass.search("et_pb_accordion_item_");
var num = thisclass.charAt(substrclass + 21);
tabs[num].classList.add("et_pb_active_content","et-pb-active-slide");
};
}
</script>
http://www.aberdeenservices.com/ci-data-tabs
http://www.aberdeenservices.com/ci-data
I wonder if it's possible in Javascript to get the currently selected options in a <select multiple> field using the Selctors API rather than a "stupid" iteration over all options.
select.querySelectorAll('option[selected="selected"]') only returns the options that were marked as preselected in the original HTML, which is not what I'm looking for. Any ideas?
document.querySelectorAll('option:checked')
Works even on IE9 ;)
I was also experienced your issue, I have a feeling it's to do with JavaScript not recognising changes in the DOM.
Here is a solution:
jsFiddle
document.getElementById('test').onclick = function () {
var select = document.getElementById('select');
var options = getSelectedOptions(select);
console.log(options);
};
function getSelectedOptions(select) {
var result = [];
var options = select.getElementsByTagName('option');
for (var i = 0; i < options.length; i++) {
if (options[i].selected)
result.push(options[i]);
};
return result;
}
As described in
https://www.w3schools.com/jsref/prop_select_selectedindex.asp
you can get the currently selected index with
selectObject.selectedIndex
It also changes in a change eventListener.
For example:
id_selected = document.querySelector('#sel').selectedIndex;
console.log(document.querySelector('#sel')[id_selected]);
The following code triggers just before a page is loaded. Now I've managed to fill a select with values. But I'm not sure on how to make the first value to be the deafault selected value.
$(document).on('pagebeforeshow', '#searchpage',
//This function is the whole function that runs when the pagebefore event occurs
function () {
//This reads the universities from the api we created
$.getJSON(AddressAccess + "Home/university/format/json",
function (data) {
//The data is sent back in a collection of objects. We need to extract each object and do relative operations
for (var i = 0; i < data.length; i++) {
var university = data[i];
var SelectDropDown = document.getElementById("searchuniversity");
var NewOption = new Option(university.Name, university.UniverstiyID);
if (i == 1) {
SelectDropDown.add(NewOption, Selected);
} else {
SelectDropDown.add(NewOption);
}
};
});
});
Now if i use SelectDropDown.add(NewOption,Selected); Only one option is made as an option in the select and what I want is to just make the first option being read from my json data to be the default option appearing in the select.
Set selectedIndex of SelectDropDown to 1:
if (i == 1) {
SelectDropDown.add(NewOption);
SelectDropDown.selectedIndex = 1;
}
If you're really talking about the very first option from the options list, selectedIndex should be 0. The options array of a select element is zero based.
[edit] based on your comment:
maybe the select already contains a blank option. Try:
if (i < 1) {
SelectDropDown.options.length = 0;
SelectDropDown.add(NewOption);
SelectDropDown.selectedIndex = 0;
}
Just set the defaultSelected property of the element to true:
var newOption = new Option(university.Name, university.UniverstiyID);
newOption.defaultSelected = true;
Or use the parameters of the Option constructor:
var newOption = new Option(university.Name, university.UniverstiyID, true, true);
Hi there Dojo developers, I have a drop down form.select, and it has few options, how do set an option to be selected. Say I want to have the third option displayed in the select element. I was looking at the dojo docs and I do not see setSelected() or similar.
Thanks
You need to use displayedValue property in addition to value to set the displayed option. Use something like:
selector.set("displayedValue", "the_text_of_the_option");
or you can search the underlying store of your drop down by using :
selectorStore.fetch({query:{id: value}, onComplete: function (items) {
dojo.forEach(items, function(item){
selector.set("displayedValue", "the_text_of_the_option");
selector.set("value", "the_value_of_the_option");
});
}});
Hope that helps.
I found it, it is selector.attr("value", "the_name_of_the_option");
Thank you, this is true and working. I have tested it. However i discovered my bug: I was creating the options dynamically, and when I set .selected = true as soon as I add it to the selector it changes the sated to the first one being selected.
Or if I apply selector.set("displayedValue", "the_text_of_the_option");
It displays visually the selected one but in fact behind the selected is still the first one does not meter if I change it with the above selector.set. So I solved it by manually creating the selected state. This way when I add it letter id stays in the desired one and changes it accordingly.
Snipped here:
//populate latitude selector
match = false;
optionsArr = [];
for(var i = 0; i < namesLength; i++){
for(var j = 0, len2 = latNames.length; j < len2; j++){
if(fieldNames[i].toLowerCase() == latNames[j]){
for (var a = 0; a < namesLength; a++) {
var option = {};
option.label = fieldNames[i];
option.value = i+"";
if(i==a){
option.selected = true;
}
optionsArr.push(option);
}
match = true;
}
}
}
if(match){
var drop1 = dijit.byId("selectLatitude");
drop1.addOption(optionsArr);
}else{
var drop1 = dijit.byId("selectLatitude");
drop1.addOption(options);//options is an array of options created originally
}