I just want to fill select with array values.
Here is js code (which I took from here). It doesn't work even without loop. So if I could make it work, then filling with array won`t be a problem.
var sel = document.getElementById('CountrySelect');
var opt = document.createElement('option');
opt.innerHTML = "CountyNumerOne";
opt.value = 0;
sel.appendChild(opt);
<select id="CountrySelect">
</select>
But on the output I get empty list
You must ensure the script is triggered after the select element is parsed by the browser. You can do this either by putting the script tag after your select element, or listening for the document loaded event in your script:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var sel = document.getElementById('CountrySelect');
var opt = document.createElement('option');
opt.innerHTML = "CountyNumerOne";
opt.value = 0;
sel.appendChild(opt);
});
</script>
var select = document.getElementById("CountrySelect");
var options = ["1", "2", "3", "4", "5"]; //array
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
http://jsfiddle.net/yYW89/
function fetchList(ss){
var select = document.getElementById("storeid");
var options = ss;
while (select.options[1]) {
select.removeChild(select.options[1]);
}
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
}
This way I am able to display the list in the drop down,so how can I display check boxes in the options for multiple selection?
var select = document.getElementById("source");
var select2= document.getElementById("status");
var option = ["1", "2", "3", "4", "5","6","7","8","9"];
var option2= [];
function moveright() {
var a = source.options[source.selectedIndex].value;
var option = document.createElement("option");
option.text = a;
select2.add(option);
select.remove(i);
}
function moveleft() {
var b = status.option2[status.selectedIndex].value;
var option2 = document.createElement("option");
option2.text = b;
select.add(option2);
select2.remove(i);
}
for(i = 0; i < option.length; i++) {
var opt = option[i];
var a = document.createElement("option");
a.innerHTML = opt;
a.value = opt;
select.appendChild(a);
}
for(i = 0; i < option2.length; i++) {
var opt2 = option2[i];
var a = document.createElement("option");
a.innerHTML = opt2;
a.value = opt2;
select2.appendChild(a);
}
<select id = "source" multiple size = "10" onclick = "moveright ()">
<option>Choose a number</option>
</select>
<select id = "status" multiple size = "10" onclick = "moveleft ()">
<option>Choose a number </option>
</select>
I am new to JavaScript I am trying to push the drop down values from one drop down to another. First drop down is working, but second drop down is not working. Can anyone help me? I tried only in the JavaScript array.
Slightly changed, but giving you expected results ;)
Working fiddle
In your moveright and moveright you had a variable i which was not defined. I assume you wanted to use selected option index to remove itself.
And you should write full selector for getting elements, not using it's id directly. Browser picked up source id and returned as html element, however it could not do that with status, because there is such property as window.status.
I am new to javascript and would appreciate some input from some of you wise, veteran javascripters.
Context: I am filling a dropdown selection form (id: foodList, located within the html page) with an array of objects with several properties. I want the dropdown menu to show one property (in this case, foodName) of the object for each option, but for the rest of the object properties to remain accessible. At the moment, the dropdown lists the options by foodName, but brings up the error that it "cannot read property 'foodName' of undefined."
function Food (foodName, servingSize, calsPerServing, price) {
this.foodName = foodName;
this.servingSize = servingSize;
this.calsPerServing = calsPerServing;
this.price = price;
}
var ramenChicken = new Food("Ramen, Chicken Flavor", "1 package", 380, 0.17);
var ramenBeef = new Food("Ramen, Beef Flavor", "1 package", 380, 0.17);
var ramenOriental = new Food("Ramen, Oriental Flavor", "1 package", 380, 0.17);
var pantry = popFoodList(ramenChicken, ramenOriental, ramenBeef);
function popFoodList(list) {
var select = document.getElementById("foodList");
var i;
for(i = 0; i < arguments.length; i++) {
var opt = arguments[i].foodName;
var optFull = arguments[i];
var el = document.createElement('option');
el.textContent = opt;
el.value = optFull;
select.appendChild(el);
}
};
$(document).ready(function() {
popFoodList(pantry);
});
You're not too far off. To make this work, you need to store the object attached to the DOMElement and address it at the same location when you later reference it again.
So changing your code to:
function popFoodList(list) {
var select = document.getElementById("foodList");
var i;
for(i = 0; i < arguments.length; i++) {
var opt = arguments[i].foodName;
var optFull = arguments[i];
var el = document.createElement('option');
el.textContent = opt;
el.value = opt;
el.optFull = optFull; //this assigns the object to the DOMElement
select.appendChild(el);
}
};
That will allow you later to reference the entire object like so:
el.optFull.servingSize
Also make sure when you're referencing it, you're referencing the DOMElement not the jQuery collection (since I see you using JQ). Some jQuery callbacks receive their parameters as a jQuery collection containing the DOMElement(s)
I am dynamically changing the options in 8 selects based on a separate selected option.
The process handles counties in a state and updating all 8 selects for each county in a state is terribly repetitive as each option can only exist in one select.
My original code was thrown together quickly but worked fine:
FLCounties = [
"Alachua",
"Baker",
"Bay",
"etc."];
//Get the selects
var countyDrop1 = document.getElementById("county1");
var countyDrop2 = document.getElementById("county2");
var countyDrop3 = document.getElementById("county3");
var countyDrop4 = document.getElementById("county4");
var countyDrop5 = document.getElementById("county5");
var countyDrop6 = document.getElementById("county6");
var countyDrop7 = document.getElementById("county7");
var countyDrop8 = document.getElementById("county8");
//Get the default state if any
var initialState = document.getElementById("state").value;
getState(initialState);
//Called from onchange on the state select
function getState(sel) {
//Clear previous options and add a notice to select a state
while (countyDrop1.firstChild) {
countyDrop1.removeChild(countyDrop1.firstChild);
};
var defaultEl1= document.createElement("option");
defaultEl1.textContent = "Select a state above first.";
defaultEl1.value = "";
countyDrop1.appendChild(defaultEl1);
while (countyDrop2.firstChild) {
countyDrop2.removeChild(countyDrop2.firstChild);
};
var defaultEl2= document.createElement("option");
defaultEl2.textContent = "Select a state above first.";
defaultEl2.value = "";
countyDrop2.appendChild(defaultEl2);
while (countyDrop3.firstChild) {
countyDrop3.removeChild(countyDrop3.firstChild);
};
var defaultEl3= document.createElement("option");
defaultEl3.textContent = "Select a state above first.";
defaultEl3.value = "";
countyDrop3.appendChild(defaultEl3);
while (countyDrop4.firstChild) {
countyDrop4.removeChild(countyDrop4.firstChild);
};
var defaultEl4= document.createElement("option");
defaultEl4.textContent = "Select a state above first.";
defaultEl4.value = "";
countyDrop4.appendChild(defaultEl4);
while (countyDrop5.firstChild) {
countyDrop5.removeChild(countyDrop5.firstChild);
};
var defaultEl5= document.createElement("option");
defaultEl5.textContent = "Select a state above first.";
defaultEl5.value = "";
countyDrop5.appendChild(defaultEl5);
while (countyDrop6.firstChild) {
countyDrop6.removeChild(countyDrop6.firstChild);
};
var defaultEl6= document.createElement("option");
defaultEl6.textContent = "Select a state above first.";
defaultEl6.value = "";
countyDrop6.appendChild(defaultEl6);
while (countyDrop7.firstChild) {
countyDrop7.removeChild(countyDrop7.firstChild);
};
var defaultEl7= document.createElement("option");
defaultEl7.textContent = "Select a state above first.";
defaultEl7.value = "";
countyDrop7.appendChild(defaultEl7);
while (countyDrop8.firstChild) {
countyDrop8.removeChild(countyDrop8.firstChild);
};
var defaultEl8= document.createElement("option");
defaultEl8.textContent = "Select a state above first.";
defaultEl8.value = "";
countyDrop8.appendChild(defaultEl8);
//if no state is selected, do nothing
if (sel != ""){
switch (sel){
//value of option Florida
case "FL":
//change "select a state first" to "select a county"
countyDrop1.firstChild.textContent = "- Select a County -";
countyDrop2.firstChild.textContent = "- Select a County -";
countyDrop3.firstChild.textContent = "- Select a County -";
countyDrop4.firstChild.textContent = "- Select a County -";
countyDrop5.firstChild.textContent = "- Select a County -";
countyDrop6.firstChild.textContent = "- Select a County -";
countyDrop7.firstChild.textContent = "- Select a County -";
countyDrop8.firstChild.textContent = "- Select a County -";
for(var i = 0; i < FLCounties.length; i++) {
var opt = FLCounties[i];
var el1 = document.createElement("option");
el1.textContent = opt;
el1.value = opt;
var el2 = document.createElement("option");
el2.textContent = opt;
el2.value = opt;
var el3 = document.createElement("option");
el3.textContent = opt;
el3.value = opt;
var el4 = document.createElement("option");
el4.textContent = opt;
el4.value = opt;
var el5 = document.createElement("option");
el5.textContent = opt;
el5.value = opt;
var el6 = document.createElement("option");
el6.textContent = opt;
el6.value = opt;
var el7 = document.createElement("option");
el7.textContent = opt;
el7.value = opt;
var el8 = document.createElement("option");
el8.textContent = opt;
el8.value = opt;
countyDrop1.appendChild(el1);
countyDrop2.appendChild(el2);
countyDrop3.appendChild(el3);
countyDrop4.appendChild(el4);
countyDrop5.appendChild(el5);
countyDrop6.appendChild(el6);
countyDrop7.appendChild(el7);
countyDrop8.appendChild(el8);
}
break;
[rinse and repeat, 49 times]
I tried condensing it into a series of arrays and for loops, which really shortens the code, but it breaks the page (an infinite loop somewhere I'm sure).
New code (does not work):
var FLCounties = [
//same as above
];
var dropdowns = [
countyDrop1 = document.getElementById("county1"),
countyDrop2 = document.getElementById("county2"),
countyDrop3 = document.getElementById("county3"),
countyDrop4 = document.getElementById("county4"),
countyDrop5 = document.getElementById("county5"),
countyDrop6 = document.getElementById("county6"),
countyDrop7 = document.getElementById("county7"),
countyDrop8 = document.getElementById("county8")
];
var defaultOptions = [
defaultEl1 = document.createElement("option"),
defaultEl2 = document.createElement("option"),
defaultEl3 = document.createElement("option"),
defaultEl4 = document.createElement("option"),
defaultEl5 = document.createElement("option"),
defaultEl6 = document.createElement("option"),
defaultEl7 = document.createElement("option"),
defaultEl8 = document.createElement("option")
];
var options = [
el1 = document.createElement("option"),
el2 = document.createElement("option"),
el3 = document.createElement("option"),
el4 = document.createElement("option"),
el5 = document.createElement("option"),
el6 = document.createElement("option"),
el7 = document.createElement("option"),
el8 = document.createElement("option")
];
var initialState = document.getElementById("state").value;
getState(initialState);
function getState(sel) {
//new clear list
for(i=0;i<8;i++){
while (dropdowns[i].firstChild) {
dropdowns[i].removeChild(dropdowns[i].firstChild);
}
defaultOptions[i].textContent = "Select a state above first.";
defaultOptions[i].value = "";
dropdowns[i].appendChild(defaultOptions[i]);
}
if (sel != ""){
var opt;
switch (sel){
case "FL":
//new change "select a state first" to "select a county"
for (i=0;i<8;i++){
dropdowns[i].firstChild.textContent = "- Select a County -";
}
//new create 8 unique options and add them to the selects
for(i=0;i<FLCounties.length;i++){
opt = FLCounties[i];
for (i=0;i<8;i++){
options[i].textContent = opt;
options[i].value = opt;
for(i=0;i<8;i++){
dropdowns[i].appendChild(options[i]);
}
}
}
break;
}
}
}
Am I missing something? This should execute quicker right? Instead its holding the page from loading indefinitely.
Edit: I did find one glaring problem. The dropdowns[i].appendChild(options[i]); loop should not be in the loop above it. It should run after options has been set.
New snippet:
//new create 8 unique options and add them to the selects
for(i=0;i<FLCounties.length;i++){
opt = FLCounties[i];
for (i=0;i<8;i++){
options[i].textContent = opt;
options[i].value = opt;
}
for(i=0;i<8;i++){
dropdowns[i].appendChild(options[i]);
}
}
Edit 2:
I ran into a problem when taking a step back.
It stems from using the array of options in a loop. I knew each option element could only exist in a select once, but didn't follow that logic when writing the loop. The same option element (options[i]) is being changed and reused in each iteration, which wont work, you only get the last iteration's results. I believe this worked in the old code because it redefined the element in each iteration, not just changed it's attributes
Does this rule an array out for this use?
That's not how you add elements to an array
var dropdowns = [
countyDrop1 = document.getElementById("county1"),
countyDrop2 = document.getElementById("county2"),
countyDrop3 = document.getElementById("county3")
];
should be
var dropdowns = [
document.getElementById("county1"),
document.getElementById("county2"),
document.getElementById("county3")
];
which you would then access like so
dropdown[0] // gives county1
you may want to use an object instead (note the difference [] becomes {})
var dropdowns = {
'county1':document.getElementById("county1"),
'county2':document.getElementById("county2"),
'county3':document.getElementById("county3")
};
which you can then access like so
dropdown.county1
As I noted in the comments above, when adding the options to the select, I cannot use an array. II ended up using a two dimensional array for the counties, and a second array for the state codes that my php script submits to the form.
I realize that the arrays would be better defined as objects, but the deadline for the project is up and this code is efficient enough for production use. Here is a condensed version of my final code (until things slow down and I find time to revisit the code):
ALCounties = ["Autauga","Baldwin","Barbour","Bibb",etc];
AKCounties = ["Anchorage Borough","Bethel Census Area",etc];
etc
stateCountyList = [ALCounties,AKCounties,etc];
stateCode = [ "AL","AK","AZ","AR",etc];
countyDrops = [
document.getElementById("county1"),
document.getElementById("county2"),
document.getElementById("county3"),
document.getElementById("county4"),
document.getElementById("county5"),
document.getElementById("county6"),
document.getElementById("county7"),
document.getElementById("county8")
];
defaultOpts = [
document.createElement("option"),
document.createElement("option"),
document.createElement("option"),
document.createElement("option"),
document.createElement("option"),
document.createElement("option"),
document.createElement("option"),
document.createElement("option")
];
//If a user loads the page with a state previously stored in the db
var initialState = document.getElementById("state").value;
getState(initialState);
// Replaces the switch in the old code.
// Passed value of option in state select on the page, matches it to a var in stateCode, calls updateState to create a list for that state
function getState(sel) {
clearSetFirst(" - Select a state above first. - ");
if (sel != ""){
var valid = false;
for (i=0;i<stateCode.length;i++){
if(sel == stateCode[i]){
updateState(stateCountyList[i]);
valid = true;
break;
}
}
if(!valid){
clearSetFirst(" - Not available for this state. - ")
}
}
}
//Creates the list
function updateState(state){
clearSetFirst("- Select a County -");
for(var i = 0; i < state.length; i++) {
var opt = state[i];
//These CANNOT be a reused array, options must be unique, so they are redecalred each iteration.
var el1 = document.createElement("option");
el1.textContent = opt;
el1.value = opt;
var el2 = document.createElement("option");
el2.textContent = opt;
el2.value = opt;
var el3 = document.createElement("option");
el3.textContent = opt;
el3.value = opt;
var el4 = document.createElement("option");
el4.textContent = opt;
el4.value = opt;
var el5 = document.createElement("option");
el5.textContent = opt;
el5.value = opt;
var el6 = document.createElement("option");
el6.textContent = opt;
el6.value = opt;
var el7 = document.createElement("option");
el7.textContent = opt;
el7.value = opt;
var el8 = document.createElement("option");
el8.textContent = opt;
el8.value = opt;
//I thought about
countyDrops[0].appendChild(el1);
countyDrops[1].appendChild(el2);
countyDrops[2].appendChild(el3);
countyDrops[3].appendChild(el4);
countyDrops[4].appendChild(el5);
countyDrops[5].appendChild(el6);
countyDrops[6].appendChild(el7);
countyDrops[7].appendChild(el8);
}
}
// Clears the list if no value is selected and sets the first options text to msg
function clearSetFirst(msg){
for (var i=0;i<8;i++){
if (countyDrops[i].value == "") {
while (countyDrops[i].firstChild) {
countyDrops[i].removeChild(countyDrops[i].firstChild);
}
defaultOpts[i].textContent = msg;
defaultOpts[i].value = "";
countyDrops[i].appendChild(defaultOpts[i]);
}
}
}
Thank you all for your support. I am definitely open to suggestions for further optimizations, as the code is still 31 KB due to the size of the arrays.