This Meteor client code suppose to get the value selected from a select html element after it gets changed but currently it gets the whole element every time the select element gets clicked.
How can I get the value of the element and only after it gets changed? Thanks
here what the option looks like
<select name="foodItem>
<option value="0">
<option value="1">
</select>
Template.food.events({
"click select[name='foodItem']": function(event, opt) {
console.log(opt.find(':selected'));
}
});
Use change event instead
Template.food.events({
"change select[name='foodItem']": function(event, opt) {
console.log(opt.find(':selected'));
// to get selected value use
// event.target.value
}
});
Related
I'm trying to make a users dropdown:
<datalist id="list">
<option value="User_01"></option>
<option value="User_02"></option>
<option value="User_03"></option>
</datalist>
<input type="text" list="list" oninput="alert(this.value)"/>
When I type/choose an option from the list, the event "oninput" is triggered.
However, when I write the exact same value inside the input first, and only then click on the option, the event will not trigger.
Is there any way for me to trigger the event even if the input value is the same as the option value?
To make myself clear:
Typing "User_01" on the input field.
Choosing the "User_01" option.
The event is not triggered.
oninput is triggeren only when the value of the input changes. Since you already typed the exact value into the field, it does not change, so there is no event.
I found no way to trigger an event when someone selects an option from datalist, that matches the value, but you still can use your oninput event to check if the value matches any of the options.
change the event in your code:
<datalist id="list">
<option value="User_01"></option>
<option value="User_02"></option>
<option value="User_03"></option>
</datalist>
<input type="text" list="list" oninput="checkInput(this.value)"'/>
and add some js to check the value against the list of options:
var options = [].slice.call(document.getElementById("list").options).map( function(option) { return option.value; });
var checkInput = function(value) {
console.log(options.includes(value));
console.log(options.indexOf(value));
if(options.indexOf(value) >= 0) console.info("value match!");
}
jsfiddle: https://jsfiddle.net/sq16vxzo/
includes() gives you simple true/false and indexOf() gives you the index of option matching the current value.
The KeyUp triggers when you either click or hit enter on in the datalist.
You just have to tell if it's a KeyboardEvent or an Event (this is the one you want)
You can do that by checking the key property
if(!e.key) { ... }
hello i'm trying to reset the select menu to the defaul option immediatly after new item is selected. I never want the select menu to show the selected item. I have this select menu:
<select name="new-effect" id="new-effect">
<option selected value="add">Add New Effect</option>
<option value="waves">Waves</option>
<option value="spiral">Spiral</option>
</select>
which is handled by
$( function() {
$( "#new-effect" ).selectmenu({
change: function( event, data ){
add_new_effect(data.item.value);
}
});
});
It gets the value, but i can't get it to reset. I've tried the following:
$("#new-effect").val("");
$("#new-effect").val("add");
$("#new-effect").prop('selectedIndex',0);
None of them work and they all result in selected item being shown
If you're just trying to reset the select element back to a default value, there's a couple ways to do it. Here's is one way that will work:
https://jsfiddle.net/mswilson4040/gnLkyexa/5/
<select placeholder="Select a value..." id="new-effect">
<option selected value="add" class="default-selection">Add New Effect</option>
<option value="waves">Waves</option>
<option value="spiral">Spiral</option>
</select>
const defaultOption = $('#new-effect').find('.default-selection');
$('#new-effect').change(e => {
const value = $('#new-effect').val();
console.log(value);
$('#new-effect').val(defaultOption.val());
});
Basically, you need to capture the default value that you want to reset everytime. Once you have that, in your change event, obtain the selected value and do what you need to with it. After that is done, you can then just set the select dropdown back to the value you need it to.
The selected attribute in the HTML is fine to have for the initial render, but that will go away once someone changes the value (which is why you can't rely on it for everything).
Add this to your CSS
option:checked {
display:none;
}
If you only need this to happen for a specific list, then change the selector to #new-effect option:checked.
Now for your JS, do this
$("#new-effect").change(function(e) {
e.target.value = 'add';
});
If you have more than one list, you'll want to programatically select the default option instead of hardcoding it like I did here.
There is a drop down div in my code which is like this :
<div class="form-group alert_txt col-lg-6">
<label class="form_lable">Field</label><br>
<select class="form-control" onchange="funct1('rteSample',this.value)" ng-model="field" >
<option value="" selected >Choose field</option>
<option ng-repeat="x in field" value="{{x.fieldSymbol}}" >{{x.fieldName}}</option>
</select>
</div>
Here the drop down has a blank always even though I've given default selection as Choose field.
Also I want to return to the Choose field once any element in the list is selected. Can we do that ?
Yes I've tried other solution as well with same problem and they really didn't work. this
Here is my solution.
Whenever onchange="funct1('rteSample',this.value)"
In this function make this.value as empty string that will however set default value as selected.
You can set the first option as selected by setting the select's selectedIndex property to 0. Adding the selected attribute to an option should make it the default selected, but most browsers will set the first option as selected if none are selected explicitly.
You can get the value of the select before resetting the value, e.g.
function resetSelect(e) {
console.log('The value was ' + this.value);
this.selectedIndex = 0;
}
window.onload = function() {
document.querySelector('select').addEventListener('change', resetSelect, false);
}
<select>
<option selected>Choose field
<option> first
<option> second
<option> third
</select>
Note that if users are navigating using the keyboard, the browser may fire a change event every time the user tries to arrow down over the options, so test for accessibility.
This question already has answers here:
Get selected value of a dropdown's item using jQuery
(31 answers)
Closed 7 years ago.
I have a dropdown menu of values:
<select class="notifications-dropdown">
<option value="val1">Val4</option>
<option value="val2">Val3</option>
<option value="val3">Val2</option>
<option value="val4">Val1</option>
</select>
I want to make it so when a user selects one of the options from the dropdown, that option has a 'selected' attribute toggled on. For example, if a user clicks the dropdown and selects Val3 then the DOM should change as follows:
<select class="notifications-dropdown">
<option value="val1">Val4</option>
<option value="val2" selected>Val3</option>
<option value="val3">Val2</option>
<option value="val4">Val1</option>
</select>
I am not sure what jQuery event to listen for to know when a user selects an option though. I tried listening for a change event on the .notifications-dropdown but the generated event object does not give me any indication about which option was selected. How can I determine what option is selected on a dropdown?
Just use .val() on your select list.
$('.notifications-dropdown').change(function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="notifications-dropdown">
<option value="val1">Val4</option>
<option value="val2">Val3</option>
<option value="val3">Val2</option>
<option value="val4">Val1</option>
</select>
this when used inside of a jQuery callback is the element which the event occurred on.
You seem to be on the right track with the change event. But that is the thing, the change event just tells you that the field/option selected has changed, it, and any other event listener, will not provide a value.
To get the value, you will need to reference jQuery like so:
$('.notifications-dropdown option:selected').text();
or to get the value of the option selected, you can reference it like so:
$('.notifications-dropdown option:selected').val();
You were on the right track:
// on Dom-ready
$(function() {
// bind the 'change' event
$('.notifications-dropdown').change(function() {
// $(this).val() will have the selected value
alert($(this).val());
}).change(); // fire it once on page-load if you need to do anything based on the current value
});
The user's action of selecting a new option will modify the DOM element's selected attribute -- you don't need to do that programmatically.
Use below code on a jquery change event. Assume, select tag has id="selectId"
To Read Select Option Value
$('#selectId').val();
To Set Select Option Value
$('#selectId').val('newValue');
To Read Selected Text
$('#selectId>option:selected').text();
Use .val() method
Get the current value of the first element in the set of matched elements or set the value of every matched element.
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
$('.notifications-dropdown').change(function() {
alert($(this).val());
});
For a dropdown list (<select>), at some point I need to find the option with a given value and assign the selected attribute to it.
e.g.:
<select id="font-size">
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
</select>
In the example above, how would I add the "selected='selected'" attribute to the option with the value 14?
This would do it:
$('#font-size').val(14);
NB: this sets the selected property on the required <option> element - the attribute represents the initital value of the dropdown when the page is first loaded.
If you need this to set the initial value when the page is loaded then use,
$(document).ready(function() {
$('#font-size').val(14);
});
or else if you want it the value of which user has selected after the loading use this,
$(document).ready(function() {
$('#font-size').change(function() {
alert($(this).val());
});
});
document.getElementById("font-size").value = "14";