Develop Reference

How to populate dropdown list at selection element with values from Google sheet?

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

Update the select options with given dynamic data

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.

Javascript iteration with thymeleaf, how to pass index to array in thymeleaf

I'm setting 2 select in html, the second one depends of the first one, so I use a script "onchange", so when the first value of the select change, the second one change too, I don't know how to get the variable of my FOR to get the index of the thymeleaf model in my script
SCRIPT-
So my problem here it's inside the if when I tried to get the value of documentos[i].proyecto.id, but I can get documentos[0, 1 or any number].proyecto.id
/*<![CDATA[*/
function load(){
var e = document.getElementById("proyecto-id");
var value = e.options[e.selectedIndex].value;
var sub = document.getElementById("documento-id");
var length = sub.options.length;
for (z = 0; z < length; z++) {
sub.options[z] = null;
}
for(i=0;i<[[${#lists.size(documentos)}]];i++){
if([[${documentos[ i ].proyecto.id}]] == value){
var opt = document.createElement('option');
opt.value = [[${documentos[ i ].id}]]
opt.text = [[${documentos[ i ].nombre}]];
sub.add(opt);
}
}
}
/*]]>*/
HTML select
<select id="proyecto-id" class="custom-select" th:onchange="load()">
<option th:each="p : ${proyectos}"
th:text="${p.nombre}"
th:value="${p.id}">
</option>
</select>
<select id="documento-id" class="custom-select">
</select>

HTML drop down menu using Javascript

Im trying to make a html drop down menu, using JavaScript that uses a loop to insert options starting from a particular year and stopping at the current year. But I have been unsuccessful, the drop down menu is appearing but it has nothing in in
<script language="JavaScript" type="text/javascript">
function Year()
{
var Year = 1986
var CurrentYear = new Date().getFullYear()
while( Year < CurrentYear){
{
Year++;
document.write("<option>" + Year + "</option>");
}
}
and here is the HTML
<select id='ddYear'>
<option selected disabled hidden label="Select An Option">
<script language="JavaScript" type="text/javascript">
Year();
</script>
</select>

You have an extra curly brace. I also would suggest a better naming:
function buildOptions() {
var year = 1986;
var currentYear = new Date().getFullYear();
while( year < currentYear) {
year++;
document.write("<option>" + year + "</option>");
}
}
and then the HTML:
<select id='ddYear'>
<option selected disabled hidden label="Select An Option">
<script language="JavaScript" type="text/javascript">
buildOptions();
</script>
</select>

You can add the following code inside while loop.
Year++;
var select = document.getElementById("ddYear");
var option = document.createElement('option');
option.text = option.value = Year;
select.add(option, 0);

your approach can be a little bit better in my humble opinion.
First of all, you can avoid using a script tag inside your html to call a function, because this can be done in your script directly.
In this working fiddle, by taking your HTML and javascript, we generate dates from 1986 INCLUDED until 2015 INCLUDED, in your previous script you were excluding these dates.
I've also added you a change event listener for future use, since you may want to know when the select dropdown is going to be changed.
Fiddle:
http://jsfiddle.net/briosheje/0Luq0fxf/
<-- Not needed if you want to run the snippet below.. However if you want to add some css / html for further immediate testing..
HTML :
<select id='ddYear'>
<option selected disabled hidden label="Select An Option">
</select>
Javascript:
var ddYear = document.getElementById('ddYear');
var y = 1986;
var currYear = new Date().getFullYear();
while ( y <= currYear ) {
var newOption = document.createElement('option');
newOption.text = newOption.value = y;
y++;
ddYear.add(newOption);
}
ddYear.addEventListener('change',function() {
alert(this.value);
});
Snippet:
var ddYear = document.getElementById('ddYear');
var y = 1986;
var currYear = new Date().getFullYear();
while ( y <= currYear ) {
var newOption = document.createElement('option');
newOption.text = newOption.value = y;
y++;
ddYear.add(newOption);
}
ddYear.addEventListener('change',function() {
alert(this.value);
});
<select id='ddYear'>
<option selected disabled hidden label="Select An Option">
</select>

Consider using jQuery instead of pure javascript. It will make your code much easier to read (i.e. avoid to insert a script element inside select code and allows you to update content runtime):
HTML
<select id='ddYear'>
<option selected disabled hidden label="Select An Option"></option>
</select>
Jquery
var startYear = 1986;
var currentYear = (new Date).getFullYear();
for(var year=startYear; year<currentYear; year++)
{
$('#ddYear').append($('<option/>', {
value: year,
text : year
}));
}
Fiddle

JavaScript to create a dropdown list and get the selected value

I need to add a dropdown list to a webpage.
generally the HTML code is like this;
<select id="au_1_sel" name="au_1_sel" class="searchw8">
<option value="AU" selected="">method1</option>
<option value="FI">method2</option>
</select>
How can I use JavaScript to create a element like above.
after I create this drop down list. I need to add it after a button.
var button = document.getElementById("button1");
and I already get the button element.
Also, when the button is clicked, I want to know which option the people have choose in the dropdown list. How can I do that using JavaScript.
I try this
var select = document.createElement("select");
select.id = "wayToCalculate";
//select.name="au_1_sel";
//select.class=class="searchw8";
var option1 = document.createElement("option");
option1.value="1";
option1.selected="";
option1.innerHTML= "1";
var option2 = document.createElement("option");
option2.value="2";
option2.innerHTML= "2";
var option3 = document.createElement("option");
option3.value="3";
option3.innerHTML= "3";
select.addChild(option1);
select.addChild(option2);
select.addChild(option3);
$(select).insertAfter(button);
but when it comes to this.
select.addChild(option1);
chrome browser give me a error.
Uncaught TypeError: undefined is not a function
It seems that addChild does not work here.

Example
HTML:
<div id="container">
<button id="button1">button1</button>
</div>
JavaScript
var div = document.querySelector("#container"),
frag = document.createDocumentFragment(),
select = document.createElement("select");
select.options.add( new Option("Method1","AU", true, true) );
select.options.add( new Option("Method2","FI") );
frag.appendChild(select);
div.appendChild(frag);

var select = document.createElement("select");
select.id = "au_1_sel";
select.name="au_1_sel";
select.class=class="searchw8";
var option1 = document.createElement("option");
option.value="AU";
option.selected="";
option.innerHTML= "method1";
var option2 = document.createElement("option");
option.value="FI";
option.innerHTML= "method2";
select.addChild(option1);
select.addChild(option2);
document.addChild(select);
var button = document.getElementById("button1");
button.onClick=function(){alert(select.options[select.selectedIndex].value);}