HTML
<div class="options-container">
<select id="all-options">
<option value="0" selected>NY</option>
<option value="1">LA</option>
<option value="2">Toronto</option>
<option value="3">Paris</option>
</select>
</div>
JS
let selectedOption = {};
let allOptions = document.getElementById('all-options');
let optionValue = allOptions.options[all-options.selectedIndex].value;
if (optionValue == "0") {
selectedOption.value === "0"
} else if (optionValue === "1") {
selectedOption.value === "1"
} else if (optionValue === "2") {
selectedOption.value === "2"
} else if (optionValue === "3") {
selectedOption.value === "3"
};
I'm attempting to target the current value of an option list element in my HTML file using JS so that I can add that value to the selectedOption object. The value can be added either as a string or number object.
Defining the Event Listener
You're going to want to define an event listener in your <select>. For example:
function onSelectItem(evt)
{
let value = evt.target.selectedOptions[0].value;
let text = evt.target.selectedOptions[0].text;
// Assign it how you want here:
selectedOption = value;
}
You can't really "push" to an object. If you meant an array, change the selected option to an array ([]) and do selectedOption.push(value). If you want a useful object, however, you could just assign it to evt.target.selectedOptions[0].
Attaching the Listener
After that, you can attach it in html, and pass the event object via the default event variable:
<select id="all-options" onchange="onSelectItem(event)">
<option value="0">NY</option>
<option value="1">LA</option>
<option value="2">Toronto</option>
<option value="3">Paris</option>
</select>
or more Javascript when the page loads (by setting the onload attribute to "init()" in <body>):
function init()
{
let menu = document.getElementById('all-options');
menu.addEventListener('change', onSelectItem);
// Since it seems that you also want a default selected value when the
// page loads, you should probably also initialize your `selectedOption` to `0`.
selectedOption = menu.selectedOptions[0].value;
}
Related
I have two MUI Select elements. After the user makes a selection on the first, I'd like the second to automatically get activated.
Here's the pseudo-code:
<Select native value={region} onChange={selectRegion()}>
{regions.map((r,i) => <option value={r.value} key={`${r.value}-${r.index}`}>)
</Select>
<Select multiple value={zone}>
{zones.map((z,i) => <option value={z.value} key={`${z.value}-${z.index}`}>)
</Select>
...
const selectRegion(e) => {
setRegion(e.target.value)
let z = getZones(e.target.value)
setZones(z)
// This is where I want to focus on the Zone input
}
Can you add a ref to the select component?
const selectRef = useRef(null)
<Select inputRef={selectRef} multiple value={zone}>
{zones.map((z,i) => <option value={z.value} key={`${z.value}-${z.index}`}>)
</Select>
const selectRegion(e) => {
setRegion(e.target.value)
let z = getZones(e.target.value)
setZones(z)
// This is where I want to focus on the Zone input
selectRef.current.focus()
}
I am trying to reset options value when clicked on button. I was unable to find any solution. I have a component where I am using this code:
<select class='select-option' required [(ngModel)]='optionSelected' (ngModelChange)="toNumber()">
<option [ngValue]="undefined" disabled selected> Please select one option </option>
<option *ngFor='let option of options' [ngValue]="option">{{option}}</option>
</select>
Inside my class I am using this code:
options = ["Bar", "Pie", "Area"];
To call options inside a loop. I am using this code on button event:
appendToContainer(){
// logic
this.options == null
}
What should I do to make it default or null
Your logic is correct, but implementation is wrong:
appendToContainer(){
// logic
this.options == null; // ==> WRONG expression
this.options = []; // ==> CORRECT
}
Try this:
appendToContainer(){
// logic
this.options.value == this.options.options.first;//if the first options is 'Select'
}
I want to create setting page in my ionic app
HTML :
<select class="selectCountry">
<option value="fr">France</option>
<option value="usa">USA</option>
</select>
Controler.js
angular.module('starter.controllers', ['ionic', 'ngStorage'])
.controller('SettingsCtrl',function($scope, $localStorage){
// what to do to save and data from <select> & use if condition
});
you can put ng-model on the select and trigger onchange function
<select class="selectCountry" ng-model="selectCountry" ng-change="save()">
<option value="fr">France</option>
<option value="usa">USA</option>
</select>
and in the controller
angular.module('starter.controllers', ['ionic', 'ngStorage'])
.controller('SettingsCtrl',function($scope, $localStorage){
// what to do to save and data from <select> & use if condition
$scope.save = function(){
$localStorage.selectCountry= $scope.selectCountry; // set
alert($localStorage.selectCountry); // get
}
$localStorage.selectCountry = $localStorage.selectCountry; // get
});
Check the docs for it NgStorage
i created this pen Here
.service('storage', function() {
var myjsonObj = "nothing";//the object to hold our data
return {
setJson:function(name, item){
window.localStorage.setItem( name, item );
},
getJson:function(name){
return window.localStorage.getItem( name );
}
}
})
if you wanna store and retrieve the variable.
storage.setJson("nameOfSetting", "theVariableYouWannaStore");
var theVariableYouStored = storage.getJson("nameOfSetting");
I have 2 objects in my project: a company and an user. I have a form where the user can update his profile. One of the things he can update is the country. Now to show the countries I use a dropdown list.
I want to set the selected attribute in the option where the name of the country is equal to the actual country of the user. (country.name==user.country)
This is what I have tried but It doesn't seem to work.
<select>
<option *ngFor="#c of countries" [ngStyle]="setStyles()" [ngValue]="c">{{c.name}}</option>
</select>
setStyles(){
let styles;
if (this.companies[i].name == this.user.country ) {
styles = {
'selected'
}
return styles;
}
I would try the following:
<select>
<option *ngFor="#c of countries"
[attr.selected]="c.name == user.country ? true : null"
[ngValue]="c">
{{c.name}}
</option>
</select>
I think that it's an attribute you need and not a style.
I need to create a reset button which on click will set all select lists in a form to index 0. I have tried this code for function, but it gives a syntax error on myForm.length;
<script type="text/javascript">function ResetForm(form) {
var myForm = document.forms[form];
for( var i=0; i < myForm.length; i++ ){
myForm.select[i].selectedIndex =0; } }
</script>
There is no such property as someForm.select, try this instead:
selectTags = myForm.getElementsByTagName("select");
for(var i = 0; i < selectTags.length; i++) {
selectTags[i].selectedIndex =0;
}
A quick note to answer from Ron Royston
(I've only tried this on Chrome 74.0)
Setting mySelect.selectedIndex = 0; or $('#mySelect').prop("selectedIndex", 0); won't work if the option if it's disabled.
Hope this saves someone some time and frustration!
You simply need to set the .selectedIndex property, as in mySelect.selectedIndex = 0;. Try out the example below.
var doc = document;
var myCheckbox = doc.getElementById('my-checkbox');
var mySelect = doc.getElementById('my-select');
myCheckbox.addEventListener("click", function(e){
if (this.checked){
mySelect.disabled = false;
} else {
mySelect.selectedIndex = 0;
mySelect.disabled = true;
}
});
<label><input type="checkbox" id="my-checkbox" value=""> Enable Dropdown</label><br>
<select id="my-select" disabled>
<option class="placeholder" selected disabled value="">Select credential</option>
<option value="apples">apples</option>
<option value="oranges">oranges</option>
<option value="bananas">bananas</option>
</select>
This will set every selection directly after changing to the first option:
<select onchange="your_selection_func(); this.selectedIndex=0;">
You may find jquery useful here. This SHOULD do the trick...
$(function()
{
$('.resetButton').click(function()
{
$(this).closest('form').find('select').each(function()
{
$(this)[0].selectedIndex=0;
});
});
});
<input type="reset" class="resetButton" />
I found some hack:
<select onchange="doSomething()">
<option value="a" selected disabled hidden>a</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="…">…</option>
</select>
combination of selected disabled hidden causes that (visualy) first option responds with change event (even with same value!).
Working with IE, Edge, Opera, Chrome, but not working in FF :(
I realize this is kinda old, but wanted to improve on teh1's answer. There's no reason to create a jQuery object from 'this' when you're just going to grab the DOM element back from it:
$(this).closest('form').find('select').each(function() {
this.selectedIndex = 0;
});