I am currently using two select elements and utilizing js buttons to send options back and forth between elements. Users will move options from the left side to the right side and submit the page to make changes to their database. I am able to move elements back and forth with:
var array = $("#elementID option:selected").toArray();
without trouble.
I would like to be able to utilize this same method to send all Select Element options to an array regardless of whether or not they were selected.
I've tried
removing the option tag:
var array = $("#elementID").toArray();
using different operators within the option tag:
var array = $("#elementID option:all").toArray(); var array = $("#elementID option:unselected").toArray();
I am unable to find any documentation for further usage of the option tag outside of "selected"
Here is my full button:
$("#clearGroup").on("click", function(){
var allItems = $("#activeGroups option:selected").toArray();
console.log(allItems);
var allAvail = document.getElementById("availableGroups");
var allAct = document.getElementById("activeGroups");
allItems.forEach(function(item){
//remove Options from right side side
//activeGroups.remove(activeGroups.selectedIndex);
//Establish child option and add it to activeGroup Select Element
var opt = document.createElement('option');
opt.value = item.value;
opt.innerHTML = item.text;
allAvail.appendChild(opt);
allAct.removeChild(item);
})
Removing :selected worked as desired and allowed for all options in the select element to be successfully passed into the array. The line now looks like:
var allItems = $("#activeGroups option").toArray();
Related
I'm trying to make a functioning searchbar in javascript,that when you press enter, will delete all the content of the page while only showing the elements that I'm searching for. The elements I just mentioned are in order list.
You could have 2 lists. One for all of the elements and the other one for filtered ones.
You could use Array.filter to narrow the list down to items that don't meet the search criteria, and then loop over those elements, and set those items style.display to none.
Something like this
(Im not sure how/what the elements of the ordered list are)
//You may have to change this to reflect the actual structure your list
let orderedList = Array.from(document.querySelectorAll('ol>li'))
// get the
let query = document.getElementById('search').value.toLowerCase()
orderedList.filter(element=>{
// get the text in the list and compare it to the query
let elementText = element.innerText.toLowerCase()
let matchesQuery = elementText === query || elementText.startsWith(query) || elementText.contains(query)
//return the ones that don't match
return !matchesQuery
}).forEach(element=>{
//now loop over the ones that dont match
element.style.display = 'none'
})
var Filtered_Region = imageCollection.filterBounds(geometry);
var Filtered_Meta_Reg = Filtered_Region.filterMetadata('CLOUD_COVER','less_than', 20)
var Filtered_Date_Meta_Reg = Filtered_Meta_Reg.filterDate('2019-01-01','2019-12-31')
print(Filtered_Date_Meta_Reg.size())
var Filtered_Free_image = Filtered_Date_Meta_Reg.first();
Using this piece of code in javascript i have a list(??) of class imageCollection objects which are filtered down to 30 using some methods.What i would like to do now is access these elements one by one.
I found that using .first() gives me the first element of this list(please correct me if the type produced is not a list) but i can't access the rest.
What i would like to do is via index use something like Filtered_Date_Meta_Reg[2],Filtered_Date_Meta_Reg[3] and access the 2nd and third element.How could this be done?
I am trying to make a drop down using selct2 all in JQuery. So I have an ajax call that is sent from Java to my Jquery that has a list of parent and child elements and it is being held in a List as Strings. So for example:
WEB
-->Apache
-->Nginx
-->Random
DATABASE
-->Sql
-->NoSQL
COMPUTER SYSTEM
-->Windows File Share
I am looking for any way to fill a select2 dropdown by making a <optgroup> and having values inside of that group. I looked into making a HashMap or another way, but not sure how to go about it in JQuery. Please help. Below is the code I got so far but, it is only adding everything as a option, instead of surrounding it in optgroup.
Code:
$.each(result, function(i, obj) {
var div_data = "<option value=" + obj + ">"
+ obj + "</option>";
$(div_data).appendTo('#selectData2');
});
Here is a jsFiddle that assumes you're receiving a JavaScript object that is structured like my example:
// Example javascript object where the option group title is the key/index
// and the options for each are an array
var example_object = {
'Web': ['apache','nginx','random'],
'Database': ['sql','nosql'],
'Computer System': ['Windows','Other']
};
// The element you're appending options to
var select = $('select');
// Loop through each item in the object
$.each(example_object, function(category,items){
// Create an optgroup element with jQuery, the label is the category
var group = $('<optgroup>').attr({label: category});
// Loop through items in that category
$.each(items, function(index,item){
// Create an option element with jQuery, set the value and html
// Append to the group
$('<option>').attr({value: item}).html(item).appendTo(group);
})
// Now we have an optgroup containing all of the children items
// Append to select element
group.appendTo(select);
})
This isn't perfect but I hope it helps!
I have a group of autocomplete text menu's I'm attempting to tie together to work similar to a year make model select menu list. You first fill in the year, then it filters the make, then filters the model. My fields filter perfectly, however I'm looking to disable and clear fields that lack a populated filter by field. for example, if the year is null, then the make model field is disabled, or if you clear the make, it will also clear the model field and set it to be disabled.
My thought was to assign the fields to a group and pass that group into a json object as an array. Example,
the JS is loaded one time and init function is called for each textfield.
spec.group = yearMakeModelGroup
spec.id = fieldId
var group={};
init = function(spec) {
var groupId = spec.group;
if(!group.hasOwnProperty(groupId)) {
group = {groupId:[]};
}
group.groupId.push(spec.id);
};
I can't figure out how to dynamically create an array name so that I could use this code with other groups on the page. Example yearMakeModelGroup = year, make, model plus forsaleGroup = forsale,forsalebyowner,auto.
You need to create an object and then use the bracket notation(member operator) to create a dynamic key
if(!group.hasOwnProperty(groupId)) {
var obj = {};
obj[groupId] = [];
group = obj;
}
This is a relatively straightforward task I'd like to accomplish without jquery or AJAX.
I have a couple javascript arrays A and B, and I have multiple rows in an HTML form that each contain two columns containing dropdowns which will each contain the contents of A and B. I'd like to populate every dropdown of a certain name with a predefined set of items. This can be done after the page has already loaded.
Any ideas as to what the javascript would look like? How can I address a slew of items named one thing?
This is the code for one of your arrays:
// String values; can be used as name, id, or innerHTML
var valsA = ['one','two','three'];
// Variable to store <option> object
var opt;
// Loop through vals and make an <option> for each one
for(var i=0;i<valsA.length;i++) {
// Create node
opt = document.createElement("OPTION");
// Set innerHTML, if you want
opt.innerHTML = valsA[i];
// Set the names to be all the same, if you want
opt.setAttribute("name","oneThing");
// Set unique ID, somehow, if you want
opt.id = "value"+i+valsA[i];
// Finally, append <option> to dropdown menu
document.getElementById('myDropdown').appendChild(opt);
}
Your HTML should have a <select id='myDropdown'></select> ready to go before this script is run. You can do the same process for the other array.
Also, keep in mind that names
are not necessarily unique
can be used to get groups of items
while IDs
should be unique
unfortunately your script will run if they're not, this can be a source of errors
should be used to get a single object
So, make sure each of your dropdowns has a unique ID so your script can find it correctly.
If your HTML lookes like this:
<body>
<select id="fillme" name="fillme"></select>
<select id="fillme" name="fillme"></select>
<select id="fillme" name="fillme"></select>
<select id="fillme" name="fillme"></select>
</body>
And you just want to fill in the values from multiple arrays:
var a = ['one','two','three'];
var b = ['four', 'five'];
You can concatenate the arrays and use getElementsByName (as long as the selects have ids matching the names too, IE needs that).
var values = a.concat(b);
var selects = document.getElementsByName('fillme');
var i = selects.length;
while (i--) {
var select = selects[i];
for (var j=0,length=values.length; j<length; j++) {
select.add(new Option(values[j]));
}
}
JSBin Demo: http://jsbin.com/ehoni4/2