How do I set the text values of a HTML drop down list to a value/variable from a external text or .js file. ( The value that will be displayed in the drop down list )
for example:
<select id="usernameDropDown">
<option value="username1">name1</option>
<option value="username2">name2</option>
<option value="username3">name3</option>
</select>
I'm trying to dynamically change the values as above "name1" and "name2" and so on to the values from a local .js file.
Currently I have the values from the .js files written on the html page successfully with the following code segment:
<script src="jstest.js" type="text/javascript"></script>
<script Language='JavaScript'>
document.write(name1)
document.write(name2)
document.write(name3)
document.write(CSRUsername1)
document.write(CSRUsername2)
document.write(CSRUsername3)
</script>
currently the .js file is setup something like this:
var name1="Alpha"
var name2="Bravo"
var name3="Charlie"
var name4="Delta"
var name5="Echo"
Is there any method to set this text value using values from a text file or .js file?
If possible, I would like to keep the solution in html / java script only..
Here's how to load a drop down dynamically [Fiddle].
HTML
<select id="usernameDropDown">
<option>Choose a user</option>
</select>
Javascript
var select = document.getElementById("usernameDropDown");
var unames = ["Alpha", "Bravo", "Charlie", "Delta", "Echo"];
for (var i = 0; i < unames.length; i++) {
var opt = unames[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
You can try setting the innerText property of each of the option elements:
var s = document.getElementById('names');
s.children[0].innerText = name1;
s.children[1].innerText = name2;
s.children[2].innerText = name3;
See this Fiddle.
Note that here you would need to know which child is where (e.g. the first child of the select is name1, etc.).
An alternative way to pick the children is to set ID attributes for each option, and use document.selectElementById on each option element.
Creates the options from scratch and adds them to the drop down list. The label is the text and the value is the value.
var dropdown = document.getElementById('usernameDropDown');
// if dropdown exists
if(dropdown) {
var usernames = [
{ label: 'name1', value: 'username1' },
{ label: 'name2', value: 'username2' },
{ label: 'name3', value: 'username3' }
];
for(var i=0,l=usernames.length; i<l; i++) {
var username = usernames[i];
var option = document.createElement('option');
option.setAttribute('value',username.value);
var optionText = document.createTextNode(username.label);
option.appendChild(optionText);
dropdown.appendChild(option);
}
}
My idea:
HTML:
<select id="usernameDropDown">
<option value="username1">name1</option>
<option value="username2">name2</option>
<option value="username3">name3</option>
</select>
Javascript:
window.onload = init;
var names=["Alpha", "Bravo", "Charlie", "Delta", "Echo"];
function init(){
var opts = document.getElementById("usernameDropDown").childNodes;
for (var i=0, i<opts.length, i++){
opts[i].innerHTML = names[i];
}
}
The javascript sets the 'innerHTML' property to the name string taken from the array. Not as elegant as Dissident Rage's version but shorter :D
Here is a really quick jQuery method that you could use
UPDATED version:
It updates your select dynamically from your array
fiddle
Your HTML
<select id="usernameDropDown">
<option value="username1">Username</option>
</select>
Your javascript
var name = ["Alpha","Bravo","Charlie","Delta","Echo"];
for(i=0;i<name.length;i++){
$("#usernameDropDown").append("<option value='name" + i + "'>" + name[i] + "</option>");
}
$("#usernameDropDown option").each(function(){
if($(this).html() == "name1")
{
$(this).html(name1)
}
if($(this).html() == "name2")
{
$(this).html(name2)
}
if($(this).html() == "name3")
{
$(this).html(name3)
}
});
Related
I have a Google sheet with custom HTML form. The form contains <selection> element.
Like this
<select id="category_name" name="category_name" class="control" style="width:150px;height:20px;margin:10px 0 10px 0;">
<option value="" selected></option>
</select>
I'm getting values from the sheet
function getCategory() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sh = ss.getSheetByName(SHEET_NAME);
let list = sh.getRange(2, 1, sh.getLastRow() - 1).getValues();
return list;
}
And then I'm populating this selection with expected values in HTML file
(function () {
google.script.run.withSuccessHandler(
function (selectList) {
var select = document.getElementById("category_name");
for( var i=0; i<selectList.length; i++ ) {
var option = document.createElement("option");
option.val = selectList[i][0];
option.text = selectList[i][0];
select.add(option);
}
}
).getCategory();
}());
It looks like list was populated well, but when I choice some item from selection it returns blank value after form submitting.
Where I'm wrong and how to fix it?
Issue:
You are not setting the <option> value correctly: val is not a valid attribute. Because of this, no value is added to each <option> and they are not submitted.
Solution:
Set the option value like this:
option.value = selectList[i][0];
Using Option constructor:
Of course, using the Option constructor would also work:
var option = new Option(selectList[i][0], selectList[i][0]);
Reference:
HTMLOptionElement
Option()
I use this a lot:
function updateSelect(vA,id){
var id=id || 'sel1';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<vA.length;i++) {
select.options[i] = new Option(vA[i],vA[i]);//Option(text, value);
}
}
new option
Need to send dynamic (not hardcode) data to a select element.
This code works great in one of my sheets but doesn't work in the other sheet.
The "select" element doesn't get updated with the options I send..
I don't get an error message either.
I've spent a lot of time twitching it and trying to find why but still don't see what's wrong.
p.s. I used a dummy object to send the data for testing purpose.
The html (used MaterializeCss framework)
<select class="icons browser-default" id="selName" onChange ="getNameText();">
<option value="" disabled selected>Choose week</option>
<div id = "err"></div>
//select element initialization in framework
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var options = handlers()
var instances = M.FormSelect.init(elems);
});
function handlers() {
var success = google.script.run.withSuccessHandler(addOptions).getNamesForDropdown()
var failure = google.script.run.withFailureHandler(showError).getNamesForDropdown()
return;
}
function addOptions(names) {
var selectTag = document.getElementById("selName") //select tag
for (var k in names) {
var thisID = k;
var thisText = names[k];
var option = document.createElement("option"); //creating option
option.text = thisText
option.value = thisID;
selectTag.add(option);
}
}
function showError() {
var err = document.getElementById("err").innerHTML = "There was an error."
}
//get the text of selected option
function getNameText() {
var sel = document.getElementById("selName")
var nameText = sel.options[sel.selectedIndex].text;
return nameText;
}
Dummy object I send:
function getNamesForDropdown() {
var namesObj = {
one: "blah",
two: "blahblah"
}
return namesObj;
}
Here's the result what I get (on the screen you there's only hardcoded option):
I handled it. I added a class "browser-default" to the select and the options got updated. This class comes from MaterializeCss Framework.
Can I use a javascript if/else function to change the select options of a form? I don't want to use CSS to hide/display different dropdown menus, so here is what I've ccome up with:
function getType() {
var x = document.getElementById("food").value;
var items;
if (x === "fruit") {
items = "Apple" || items = "Oranges" || items = "Bananas";
else {
items = "Eggplants" || items = "Olives"
}
document.getElementById("pickone").value;
}
<input type="text" id="food">
<select id="pickone">
<option id="1"></option>
<option id="2"></option>
</select>
I can't seem to find any documentation about how to do this, so any help would be great.
You could append a string for the options and set it as innerHTML of your select field afterwards:
function getType() {
var x = document.getElementById("food").value;
var items;
if (x === "fruit") {
items = ["Apple", "Oranges", "Bananas"];
} else {
items = ["Eggplants", "Olives"]
}
var str = ""
for (var item of items) {
str += "<option>" + item + "</option>"
}
document.getElementById("pickone").innerHTML = str;
}
document.getElementById("btn").addEventListener("click", getType)
<input type="text" id="food">
<button id="btn">click</button>
<select id="pickone">
</select>
Your logic is not very right, specially where you try to do this
items = "Apple" || items = "Oranges" || items = "Bananas";
with the above statement you are saying that itens are Apple OR Oranges OR Bananas, only one at once...
you'll need an array of elements, like this:
var itens = ["Apple", "Oranges", "Bananas"];
Then, you will need to loop through it to add them to the select, like this:
var itens = ["Apple", "Orange", "Banana"];
var selectElem = document.getElementById("mySelect");
for (var i = 0; i < itens.length; i++){
var item = itens[i];
var element = document.createElement("option");
element.innerText = item;
selectElem.append(element);
}
<select id="mySelect"></select>
With that, now you can achieve what you want, just follow this logic...
you can also, if you want, add an `if` statement to check what is the input value, then set the options based on the input value, as you are already trying to do.
You can change options easily with JavaScript. I would advise to use an additional library to ease DOM manipulation, such as JQuery. An example code would look like the example below. You have to make sure to define an event on which the options should be changed. The example listens to changes within the input field.
<input type="text" id="food" value="vegetables"/>
<select id="pickone"></select>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<script>
var fruits = ["Apple", "Oranges", "Bananas"];
var vegetables = ["Eggplants", "Olives"];
vegetables.forEach(function(item){
$('#pickone').append("<option>" + item + "</option>");
});
$('body').on('keyup', '#food', function (){
if ($('#food').val() === 'fruits') {
$('#pickone').html("");
fruits.forEach(function(item){
$('#pickone').append("<option>" + item + "</option>");
});
}
});
</script>
I am trying to create a button that calls a function which creates new list items with selection boxes. The code below create a select element however, the button disappears and it doesn't create one list item after another. Any idea how I can persist the button and add one select element after another?
<button type="button" onclick="createTable()">Add Item</button>
function createTable()
{
var itemName = "Selections: ";
document.write(itemName);
for (var i=0;i<7;i++)
{
var myTable = " ";
myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>";
myTable+="<option value='zeroPoint'>0</option>";
myTable+="<option value='halfPoint'>1/2</option>";
myTable+="<option value='onePoint'>1</option>";
myTable+="</select>";
document.write(myTable);
}
}
I made some changes to the documnet.write way you have. However, I would strongly recommend dynamically creating html dom nodes. I added another method, createTable2, which does the required. It will also be easier for you to preserve the html content you have, which can be easily written over with document.write way.
Edit:
I added one more method, createTable2, to allow adding multiple selects. There is a model you can pass in with the select and option information you have. There is a flag, empty, which is set to true if you would like to empty the div before adding new selects; i.e. createTable3(true).
function createTable()
{
var itemName = "Selections: ";
var selectElement = document.getElementById("render");
for (var i=0;i<7;i++)
{
var myTable = " ";
myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>";
myTable+="<option value='zeroPoint'>0</option>";
myTable+="<option value='halfPoint'>1/2</option>";
myTable+="<option value='onePoint'>1</option>";
myTable+="</select>";
selectElement.innerHTML = myTable;
}
}
function createTable2(){
var myDiv = document.getElementById("render");
//Create array of options to be added
var array = ["zeroPoint","halfPoint","onePoint"];
var texts = ["1","1/2","1"];
var selectList = document.createElement("select");
selectList.id = "mySelect";
selectList.style.fontSize = "10px";
selectList.onChange = 'Calculate()';
myDiv.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = texts[i];
selectList.appendChild(option);
}
}
function createTable3(empty){
var myDiv = document.getElementById("render");
if(empty){
myDiv.innerHTML = "";
}
let model = {
"select1": [{value: "zeroPoint", label: "1"},
{value: "halfPoint", label: "1/2"},
{value: "onePoint", label: "1"}],
"select2": [{value: "zeroPoint1", label: "11"},
{value: "halfPoint1", label: "11/22"},
{value: "onePoint1", label: "11"}]
};
Object.keys(model).forEach(function(key){
let entry = model[key];
var selectList = document.createElement("select");
selectList.id = key;
selectList.style.fontSize = "10px";
myDiv.appendChild(selectList);
//Create and append the options
for (var i = 0, item; item = entry[i]; i++) {
var option = document.createElement("option");
option.value = item.value;
option.text = item.label;
selectList.appendChild(option);
}
});
}
<button type="button" onclick="createTable3()">Add Item</button>
<div id= "render"/>
If you use document.write("") the entire web page content will be replace by the content you pass inside the document.write function. Instead create a div element under button element like
<div id="list"></div>
then in the javascript file change as
function createTable()
{
var itemName = "Selections: ";
var selectElement = document.getElementById(list);
for (var i=0;i<7;i++)
{
var myTable = " ";
myTable+="<select name='test' id='mySelect"+i+"' style='font-size:10px' onchange='Calculate()'>";
myTable+="<option value='zeroPoint'>0</option>";
myTable+="<option value='halfPoint'>1/2</option>";
myTable+="<option value='onePoint'>1</option>";
myTable+="</select>";
selectElement.innerHTML = myTable;
}
}
I am unsure what you are exactly trying to achieve, but having DOM elements in strings and then modifying an elements innerHTML or using document.write is just a hack. You need to leverage the DOM apis.
While that means my code is maybe double or triple the the size of your code. Its the more maintainable version long term.
function createTable() {
var selectMenu = document.querySelector('#selectionsContainer');
// Array of options elements
var myTable = [];
// Pushing some elements to our my table array
//
myTable.push(
createOption('zeroPoint', 0),
createOption('halfPoint', 0.5),
createOption('onePoint', 1)
)
// Looping through all elements and adding them to the //selections container
//
myTable.forEach( element => {
selectionsContainer.appendChild(element);
});
}
/** Creates an option element and returns it for usage */
function createOption(value, label) {
var option = document.createElement('option');
option.value = value;
option.innerText = label;
return option;
}
function Calculate(value) {
console.log('do whatever you want to with the value: ', value);
}
select {
font-size:10px
}
<button type="button" onclick="createTable()">Add Item</button>
<label for="selectionsContainer">
Selections
<label>
<select id="selectionsContainer" onchange='Calculate(this.value)'>
<option value=5> 5 </option>
<select>
All the answers so far are pointing that OP might be doing something wrong by not creating select dynamically. But we don't know his requirements.
Also everybody already explained document.write will write on you entire document thus deleting everything, you don't want that.
document.write --> https://developer.mozilla.org/en-US/docs/Web/API/Document/write
appendChild should be used but you wanted a string and appendChild expect Node not string.
appendChild --> https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
node --> https://developer.mozilla.org/en-US/docs/Web/API/Node
So the only way to solve this is by using innerHTML and summing up inner Html by adding new ones.
Or by creating node from sting, which requires some more logic, see here --> Creating a new DOM element from an HTML string using built-in DOM methods or prototype
innerHTML --> https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
const selectTamplate = (selectId, onChangeCallbackName) => {
return `
<select name='test' id='mySelect${selectId}' style='font-size:10px' onchange='${onChangeCallbackName}()'>
<option value='zeroPoint'>0</option>
<option value='halfPoint'>1/2</option>
<option value='onePoint'>1</option>
</select>
`
};
const appendStringHtml = (elementTargetHtml, elemenAppend) => {
elemenAppend.innerHTML += elementTargetHtml;
}
const doSomethingOnChange = () => {
console.log('I am the KING!');
};
const placeToAppend = document.querySelector('.append-selects-here');
const buttonAppender = document.querySelector('.btn-append');
let selectID = 1;
buttonAppender.addEventListener('click', ()=>{
const selectHTML = selectTamplate(selectID, 'doSomethingOnChange');
appendStringHtml(selectHTML, placeToAppend);
selectID ++;
});
<button class="btn-append">Add Selects</button>
<div class="append-selects-here"></div>
see the working code here --> https://codepen.io/nikolamitic/pen/PEpEbj
I used template string so that interpolation is possible, little bit more clear. And separate the logic while still keeping yours.
I want to create a dynamic drop down list with javascript.
Right now it works like this:
- if I choose first option, then second, then third.
I want to change this code to:
- when I choose first option, it shows second and third option in the same time(second and third option depends of first)
I want to do something like:
Choose name:
John Doe(first option)
Choose proffesion:
Dentist(second option)
Choose gender:
male(third option)
Is it possible?
Thanks for reply.
<!doctype html>
<html>
<head>
<script>
var modelsArray = new Array(
["Chevy","","Camaro","Corvette","Impala"],
["Dodge","","Avenger","Challenger","Charger"],
["Ford","","Mustang","Shelby"]
);
var colorsArray = new Array(
["Camaro","","White","Black","Red"],
["Corvette","","White","Purple","Blue","Fawn"],
["Impala","","White","Black","Red","Chrome Yellow"],
["Avenger","","White","Acid Green","Alice Blue"],
["Challenger","","White","Violet","Blue-Green"],
["Charger","","White","Dark Pastel Red"],
["Mustang","","White","Debian red","Impala","Flame"],
["Shelby","","White","Deep Spring Bud"]
);
function populate1(s1,s2,s3){
var optionArray = [];
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
var s3 = document.getElementById(s3);
s3.innerHTML = "";
for(var i = 0; i < modelsArray.length; i++){
if(s1.value == modelsArray[i][0]){
for(var x = 1; x < modelsArray[i].length; x++){
optionArray.push(modelsArray[i][x]);
}
}
}
optionArray.sort();
for(var option in optionArray){
var newOption = document.createElement("option");
newOption.value = optionArray[option];
newOption.innerHTML = optionArray[option];
s2.options.add(newOption);
}
}
function populate2(s1,s2){
var optionArray = [];
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
for(var i = 0; i < colorsArray.length; i++){
if(s1.value == colorsArray[i][0]){
for(var x = 1; x < colorsArray[i].length; x++){
optionArray.push(colorsArray[i][x]);
}
}
}
optionArray.sort();
for(var option in optionArray){
var newOption = document.createElement("option");
newOption.value = optionArray[option];
newOption.innerHTML = optionArray[option];
s2.options.add(newOption);
}
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate1(this.id,'slct2','slct3')">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2" onchange="populate2(this.id,'slct3')"></select>
<hr />
Choose Car Color:
<select id="slct3" name="slct3"></select>
<hr />
</body>
</html>
I've created a jsfiddle here which implements a rudimentary example.
You can create DOM event listeners to respond to the change event of the select elements. When these events are triggered, pass the value of the selected option to a function which can extract the models/colours from the data.
Ideally you will setup your server side code to return the data in a format such as:
{
"makes": {
"ford": {
"models": {
"focus": {
"colours": [
"blue",
"black"
]
},
"probe": {
"colours": [
"green",
"grey"
]
}
}
}
}
Using this data format you can easily drill down the object tree e.g.
carData.makes.ford.models.focus.colours
Once you have the data you can then use jQuery to append options to your select e.g.
for (var model in models) {
$('select').append('<option value="'
+ model + '">' + model +
'</option>');
}
*EDIT: If you want to use the combination of the first two selects then you can do something like this:
var mapCombinations = {canada: {toronto: {mapName: "canada"}}};
var mapName = mapCombinations[selectValue1][selectValue2].mapName);
showMap(mapName);
function showMap(mapName) {
// Call server to get map
$.ajax({
type: "GET",
url: "http://yoururl.com/api/map/" + mapName,
success: function(data){
// display map
}
});
}
EDIT2: You can use the same principle if you want the third select to contain an action. I've replaced the colours array with actions. This third select will change depending on the first 2 select values.
Updated jsfiddle which doesn't use jquery.
You can then set up an event listener to process that action.
I need to repeat third value all the time.
I try to give you an example.
First value = Country
Second value = City
Third value = option
And I want to do something like:
If First value = Canada then Second value = Toronto
If First value = Canada then Third value = Show canada map
Second Value and third value don't depend of themselve, only of first value.