This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
Brief
I am attempting to change the value of all dropdown boxes with the class of admin__control-select to remove when the Remove All button is pressed
Issue
The below code appears to work, but only updates the value of the first select box. I tried using querySelectorAll but that doesn't work at all.
Code
<script type="text/javascript">
var selectFunction = function() {
document.querySelector('.admin__control-select').value = "remove";
};
</script>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<input type="button" value="Remove All" onclick="selectFunction()" />
Use querySelectorAll(), it returns an Array with matched elements.
Then, traverse the array with for().
var elms = document.querySelectorAll('.admin__control-select');
for(var i=0; i<elms.length; i++){
elms[i].value ='remove';
}
Try this:
<script type="text/javascript">
var selectFunction = function() {
var selects = document.querySelectorAll('.admin__control-select');
selects.forEach(s => s.value = 'remove');
};
</script>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<select class="admin__control-select">
<option value="defaultValue">Default</option>
<option value="Option1">Option1</option>
<option value="remove">Remove</option>
</select>
<input type="button" value="Remove All" onclick="selectFunction()" />
querySelectorAll()
returns the elements so you have to loop over them and set the value property.
Related
I got an issue with some code I wrote in google script. I'm using a (select-multiple) and I want to return the second option that is selected. And append this option in a google sheet. I looked it up and tried different solutions but those don't seem to work.
This is the html:
<select id ="multipleSelect" multiple="multiple">
<option value="1">Google Sheets </option>
<option value="2">Excel </option>
<option value="3">Word </option>
<option value="4">Acess </option>
<option value="5">Docs </option>
<option value="6">Pwp </option>
</select>
This is the javascript:
<script>
document.getElementById("btn").addEventListener("click", doStuff);
function doStuff(){
var userInfo = {};
userInfo.firstName = document.getElementById("fn").value;
userInfo.lastnName = document.getElementById("ln").value;
userInfo.app = $('#multipleSelect').val()[1].value;
google.script.run.userClicked(userInfo);
document.getElementById("fn").value ="";
document.getElementById("ln").value ="";
}
</script>
And this is where i write it to the google sheet:
function doGet(e) {
return HtmlService.createTemplateFromFile("page").evaluate();
}
function userClicked(user){
var url = "https://docs.google.com/spreadsheets/d/1L8QWNMDjoit8QILRCBYKply49FPjMVVRDyVhVET2fUA/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([user.firstName, user.app, new Date()]);
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
I'm able to write the first and last name of the user in the google sheet, but when implementing the multiple select, it won't do anything. Any tips are appreciated. Thanks
userInfo.app = $('#multipleSelect').val()[1].value;
should be
userInfo.app = $('#multipleSelect').val()[1];
For a multi-select, .val() returns an array of the selected values, so .val()[1] is a string. .value is a property of input elements, not strings.
document.getElementById("btn").addEventListener("click", doStuff);
function doStuff() {
var userInfo = {};
userInfo.app = $('#multipleSelect').val()[1];
console.log(userInfo.app);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="multipleSelect" multiple="multiple">
<option value="1">Google Sheets </option>
<option value="2">Excel </option>
<option value="3">Word </option>
<option value="4">Acess </option>
<option value="5">Docs </option>
<option value="6">Pwp </option>
</select>
<button id="btn">Show second item</button>
You should probably also have code to check that they have selected at least 2 options.
Put the multi-select values into an array and then get the second index:
document.getElementById("btn").addEventListener("click", doStuff);
function doStuff(){
var userInfo = {};
userInfo.firstName = "Bob";
userInfo.lastnName = "Loblaw";
let arr = $('#multipleSelect').val();
userInfo.app = arr.length > 1 ? arr[1] : null
console.clear()
console.log(userInfo)
//google.script.run.userClicked(userInfo);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id ="multipleSelect" multiple="multiple">
<option value="1">Google Sheets </option>
<option value="2">Excel </option>
<option value="3">Word </option>
<option value="4">Acess </option>
<option value="5">Docs </option>
<option value="6">Pwp </option>
</select>
<input id="btn" type="button" value="do stuff" />
You must call the .val() of <select> element itself to get the array of selected items.
$(function() {
function doStuff() {
var userInfo = {
firstName: $("#fn").val(),
lastName: $("#ln").val(),
app: $('#multipleSelect').val()
};
console.log(userInfo);
}
$("#btn").click(doStuff);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>Name</strong><br /> Fisrt: <input id="fn" type="text" value="Thomas" /> Last: <input id="ln" type="text" value="Anderson" /><br />
<select id="multipleSelect" multiple="multiple">
<option value="1">Google Sheets </option>
<option value="2">Excel </option>
<option value="3">Word </option>
<option value="4">Acess </option>
<option value="5">Docs </option>
<option value="6">Pwp </option>
</select><br />
<button id="btn">Go</button>
When the first element in the collection is a select-multiple (i.e., a select element with the multiple attribute set), .val() returns an array containing the value of each selected option. As of jQuery 3.0, if no options are selected, it returns an empty array ([]); prior to jQuery 3.0, it returns null.
See More: https://api.jquery.com/val/
This of course requires jQuery to be loaded. With your use of Google API, I would advise jQuery 3.0 or higher.
This question already has answers here:
Which selector do I need to select an option by its text?
(20 answers)
Closed 3 years ago.
I try to change the text of one of select option through jquery. But it's not working.
https://jsfiddle.net/oj3spt0y/8/
$(document).ready(function() {
var els = $('#coupon-options select').find('option[text="Unknown"]'); // tried .text('sd')
$.each(els, function(i, v) {
v.text('sd') // tried $(this).text('sd')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coupon-options">
<select name="asd" class="form-control" title="" id="gfhfg">
<option value="1" selected="">Unknown</option>
<option value="2">Yes</option>
<option value="3">No</option>
</select>
</div>
You can try with jQuery's :contains() Selector
$(document).ready(function() {
var op = $('#coupon-options select option:contains(Unknown)');
op.text('sd')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="coupon-options">
<select name="asd" class="form-control" title="" id="gfhfg">
<option value="1" selected="">Unknown</option>
<option value="2">Yes</option>
<option value="3">No</option>
</select>
</div>
This question already has answers here:
Javascript/jQuery: Set Values (Selection) in a multiple Select
(9 answers)
Closed 5 years ago.
I have a html
<select name="availableon[]" class="form-control" multiple>
<option value="pc">PC</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
</select>
And in my AJAX success function I have the value
availableon = 'pc,iphone'
Now I want to explode the availableon variable and select the multiple select based on value using javascript or jquery. How will I do that?
You can change the data to an array and then set the value with the array
var availableon = 'pc,iphone'
var dataarray = availableon.split(",");
$("select").val(dataarray);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="availableon[]" class="form-control" multiple>
<option value="pc">PC</option>
<option value="iphone">iPhone</option>
<option value="android">Android</option>
</select>
This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
I have two select tags in my page. Each of these have several options within. Now I want to access only the second select box, but since I have used getElementByTagName("options") so it is fetching only the first option tag.I am unable to access the second option tags.
My code is here:
function myFunction() {
var x = document.getElementById("mySelect_two").selectedIndex;
alert(document.getElementsByTagName("option")[x].value);
}
<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<select id="mySelect_one">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
<select id="mySelect_two">
<option value="India">India</option>
<option value="Nepal">Nepal</option>
<option value="Spain">Spain</option>
<option value="Mexico">Mexico</option>
</select>
<p>Click the button to return the value of the selected fruit.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
you need to get elements by tag name on the select rather than entire document
function myFunction()
{
var select = document.getElementById("mySelect_two");
var x = select.selectedIndex;
alert(select.getElementsByTagName("option")[x].value);
}
with options
var sel = document.getElementById("mySelect_two");
var selectedIndex = sel.selectedIndex;
var value = sel.options[selectedIndex].value;
with getElementsByTagName
var sel = document.getElementById("mySelect_two");
var selectedIndex = sel.selectedIndex;
var value = sel.getElementsByTagName("option")[selectedIndex].value;
Use below script to get selected options value:
var e = document.getElementById("mySelect_two");
var str = e.options[e.selectedIndex].value;
alert(str)
<select id="mySelect_two">
<option value="India">India</option>
<option value="Nepal" selected>Nepal</option>
<option value="Spain">Spain</option>
<option value="Mexico">Mexico</option>
</select>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript to Select Multiple options
How can I select an option of HTML <select multiple> element using JavaScript?
My quick example:
<select multiple id="select">
<option value="1">1</option>
<option value="2" class="toselect">2</option>
<option value="3">3</option>
<option value="4" class="toselect">4</option>
<option value="5">5</option>
</select>
<script type="text/javascript">
var select = document.getElementById("select");
var select_options = select.getElementsByClassName("toselect");
for (var i = 0; typeof(select_options) != "undefined"; i++) {
select_options[i].selected = true;
}
</script>
Here, I'm using class names to designate which options needs to be selected. You can use whatever you want.
Something like this:
var selectBox = document.getElementById('selectbox');
selectBox.children[1].selected = true;
Complete example: jsFiddle