I'm trying to get each value from options inside a select menu, but I'm struggling to target the element as it has only custom attributes.
Example of html:
<div class="select-wrap">
<select ng-model="currentTab">
<option value="0">Tab 1</option>
<option value="1">Tab 2</option>
</select>
</div>
What I'm trying to get:
0
1
from the
option value=""
Assuming there’s only one such <select> with the given attribute, you can simply use attribute selectors in querySelectorAll. Using Array.from with a mapping function, you can get an array of all values. Remove Number( ), if converting the values to numbers isn’t desired.
const allValues = Array.from(document.querySelectorAll("select[ng-model='currentTab'] > option"), ({value}) => Number(value));
console.log(allValues);
<div class="select-wrap">
<select ng-model="currentTab">
<option value="0">Tab 1</option>
<option value="1">Tab 2</option>
</select>
</div>
Something like this would work
document.querySelectorAll('select[ng-model="currentTab"] option')
.forEach(el=>{
console.log(el.value)
})
<div class="select-wrap">
<select ng-model="currentTab">
<option value="0" selected="selected">Tab 1</option>
<option value="1" selected="selected">Tab 2</option>
</select>
</div>
Related
I need to map to an array the selected options inside select element (multiple selection is enable).
Here is the html:
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar">Programar</option>
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte">Deporte</option>
</select>
I tried this:
Array.from(document.querySelector("#listado")).map(elemento => elemento.value); which returns every option. According to this answer, adding option:checked to the query param should do the trick, but I get an empty list.
Any idea on what the reason might be?
You can use document.querySelectorAll and only select options that are checked, then map them.
let options=[...document.querySelectorAll("#listado option:checked")].map(elemento => elemento.value)
console.log(options)
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar" selected>Programar</option>
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte" selected>Deporte</option>
</select>
Have you tried this?
console.log(
Array.from(document.querySelector("#listado").childNodes).filter(elemento => elemento.selected).map(elemento => elemento.value) // this line
);
<select id="listado" size="5" multiple>
<option value="Leer" id="aficion-leer">Leer</option>
<option value="Programar" id="aficion-programar" selected>Programar</option> <!-- selected for demo -->
<option value="Cine" id="aficion-cine">Cine</option>
<option value="Deporte" id="aficion-deporte">Deporte</option>
</select>
I'm using multiple select of Materialize CSS in a form to select multiple values. The UI is working fine, but I couldn't find a way to retrieve all the selected values. I used an onChange event handler to retrieve the values. However instead of an array of selected values it is returning only the first selected value in the list.
Can anybody explain how to do it using JavaScript for a simple multiple select like the one below? (Not by using jQuery)
<select id='mySelect' multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
You can get the selected in this way:
html:
<select multiple id="option-select">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
js
document.addEventListener("DOMContentLoaded", function () {
const selects = document.querySelector("select");
const instances = M.FormSelect.init(selects, {});
const selectOption = document.querySelector("#option-select");
selectOption.addEventListener("change", function () {
const instance = M.FormSelect.getInstance(selectOption);
const selectedValues = instance.getSelectedValues();
console.log(selectedValues);
});
});
I have a select element like this:
<select name="select">
<option value="opt1">Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
and I want user to select a option e.g. opt2, opt3... but opt1,
how to to use html 5 validation to valid the select?
I think the only way to add the validation here is to set the default option value to an empty string and add required attribute to select element. Now you can click on submit button to see the validation:
<form>
<label >Choose an option:</label>
<select name="select" required>
<option value="" disabled selected>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
<input type="submit">
</form>
The issue here is that when you set a value to the default option to something other than empty string the validation infers it as a valid value has been already selected, thus the validation is not triggered at that point.
You can do something like the following:
<select name="select">
<option value="opt1" selected disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
In the snippet above, the opt1 is selected by default. The user can only select opt2 or opt3, but once they do that then they cannot selecte opt1, hope this is the behaviour you're looking for.
Try Using:
<select name="select" required>
<option value="opt1" selected="selected" disabled>Select One Value Only</option>
<option value="opt2">Type 2</option>
<option value="opt3">Type 3</option>
</select>
I have a drop-down box in HTML showing three options. I am also using javaScript and want to use the getElementById tool to connect the two. However, I only have one ID for the drop-down box. How does javascript recognize that I have three different options?
There's actually a demo on w3schools.com showing exactly what you're asking. To get the number of options, you could do something like
document.getElementById("mySelect").options.length
Here is an example of how to retrieve the value of a dropdown: https://jsfiddle.net/ykcwgnm8/
You use getElementBy* functions to get the element, however value attribute denotes which item is currently selected.
HTML:
<select id="dropdown">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
JS:
function onChangeHandler(e)
{
alert("you have selected item with value "+this.value);
}
document.getElementById("dropdown").addEventListener("change", onChangeHandler);
You can listen for change like this
var list = document.getElementById("mySelect")
list.addEventListener('change', function(e){
console.log(e.target.selectedIndex)
console.log(e.target.options[e.target.selectedIndex].text)
})
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
You can do something like this, here is an example:-
html
<select id="selectBox">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>
js
var e = document.getElementById("selectBox");
var selectedValue = e.options[e.selectedIndex].value;
// this will give selectedValue as 2
Hope you find this useful!!
Here's my code. Is it possible to empty the value of the first option using jquery/javascript ?
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
so it will become like that:
<option value="">Select category</option>
I already know that i can remove the whole first option by targeting its value
$("#select_1 option[value='0']").remove();
You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:
document.getElementById("select_1").options[0].value = '';
To target the first element of a collection use :first. Then you can use val('') to remove the value from it:
$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<script>
$(document).ready(function (){
$('#btnremoveoption').click(function (){
$('#select_1 option:first').remove();
});
});
</script>
<body>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>
This Program will keep Removing first option when ever button will be click.
$(document).ready(function (){
$('#select_1 option:first').remove();
});
this will remove it onload of the page. without leaving the option blank it will be filled with the next option.