I am trying to make an Asp.Net Mvc Ajax project.I have to take the value of select-option in a loop with jquery.All select's ids are same , names are same when I try it takes the first select's value.btw I have tried all things in this title: jQuery Get Selected Option From Dropdown. Can you help me please?
#foreach (var item in Model)
{
<select id="selSaat">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
}
Heres some JS code that will give you the selections value if there is only 1 select element on your page and the options within it contain values on them:
document.getElementsByTagName('select')[0].onchange = function(){
alert(this.value);
};
Heres a working demo for ya:
http://codepen.io/nicholasabrams/pen/OVOPYK
Targeting a <select> with native browser javascript with the onchange method will return the value selected when it occurs via user interaction.
http://www.w3schools.com/jsref/event_onchange.asp
Related
I want my select to always show the same text, but "keep" the selected option value.
So e.g. my select always shows text "Language", but when I get the value of it in JS, it will return the value of selected option.
How do I achieve this? If there's no possibility for pure HTML + CSS, vanilla JS will do.
Edit: I want this because when i choose a value, I have a list of input boxes which get filled by this. They are then changeable; this select is only used to set the "base" of these inputs. I want this select to always show the same
text because I don't want to end up in a situation where select shows different text than actually the text in inputs that will be used.
Answer:
<select id="mySelect">
<option value="" hidden>Language</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
document.getElementById('mySelect').addEventListener('change', showSameValue)
function showSameValue() {
let select = document.getElementById('mySelect')
let firstOption = select.querySelector('option')
firstOption.value = select.value
select.selectedIndex = 0
}
Using the change event, you can capture the selected value then simply set the first option as selected and set its value to the selected value.
select = document.querySelector("select");
first = select.querySelector("option");
select.addEventListener("change",function(el){
first.value = el.target.value;
el.target.querySelector("option").setAttribute("selected",false)
el.target.selectedIndex = 0;
console.log(first.value);
});
<select>
<option value="">Language</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
This is a weird behavior but it can be done by
adding a hidden input element next to select
add the event listener to select (onchange) that would change the value of the hidden element and reset select to desired value 'Languages'
The key would be to have proper fields names, so when submitting the form select could be omitted and hidden would prevail.
You can store the selected value in a variable to meet your requirement and then use it wherever you need.
<select name="select" onchange="func(this.value);">
<option value="value1">Display always</option>
<option value="value2">Random Value</option>
</select>
And here's the Js function
var selected = "";
function func(selectedValue) {
document.getElementById( "select").selectedIndex = "0";
selected = selectedValue; // Use this after final selection
}
There are a few ways to achieve this, but using just a <select> would not be possible, I would not advise this on an accessibility UX principal.
One option would be to use a <span> or <div> that when clicked shows the options.
So I am trying to get the user input(value) of this select option button. Everything I look at online dosen't really tell me how to get this button value so I can use it and manipulate it, please help
You need a click event listener for this.
This code snippet demonstrate what you need to do:
// Get Select List
var favAnimal = document.getElementById("favAnimal");
// Add event Listener for any change in the selection
favAnimal.addEventListener("change", function() {
if (favAnimal != undefined && favAnimal.value != "Choose"){
//Do actions on selected option
console.log(favAnimal.value)
}
});
<select id="favAnimal">
<option value="Choose">choose</option>
<option value="Lion">Lion</option>
<option value="Shark">Shark</option>
<option value="Eagle">Eagle</option>
</select>
Given a select with some options
<select id="favAnimal">
<option value="Choose">Choose</option>
<option value="lion">Lion</option>
...
</select>
To get the value of the select you do it like this
var favAnimal = document.getElementById("favAnimal");
console.log(favAnimal.value);
Ok, I'm sure this one is super simple, though it's evading me.
I have a very simple dropdown select menu - as shown below - with predefined options.
I am setting the $scope.qty in my controller and it correctly selects the appropriate <option>
However, in my controller, on a save() function, when I get the value of $scope.qty i get the original value, that i set earlier, and not the newly selected on.
What I am missing to bind my selected option to the model?
<select ng-model="qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
In my controller, I set the qty
$scope.qty = 4;
When I change my select, to say 2, $scope.qty still equals 4.
You can simply create the array in ng-options:
<select ng-options="nr for nr in [1,2,3,4]" ng-model="qty"></select>
Although the way you did it should usually work too. ng-options is not required for ng-model to work. It's the other way around.
AngularJS 1.3 only allows for a single option element that can be used for the null value (aka, not selected).
You need to use the ngOptions convention.
Here's the documentation that explains this:
https://docs.angularjs.org/api/ng/directive/select
I have some jQuery code that selects an option in a select list. The first time it selects an item everything works, however the second pass through IE and FF do not clear the selected items. Chrome always works.
I have created a JSFiddle with a demo of what I am seeing. I have tried both $("testUpdate option:selected") and $("testUpdate > option:selected") as selectors, each work the first time only. I have tried changing the multiple tag to just multiple per this documentation.
Here is the HTML and relevant failing jQuery. I have been using jQuery 1.9.1, but on JSFiddle I see the same results with newer versions.
//HTML
<select id="testUpdate" name="testUpdateName" multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
//jQuery that fails the 2nd pass
$("#testUpdate option:selected").each(function () {
//This is not executed
$(this).removeAttr('selected');
});
//Alternate selector to force all options to always be checked
//HTML is correct after this, but visually the list is not selected
//I would also prefer not to do this because the actual list will be hundreds of items
$("#testUpdate option").each(function () {
$(this).removeAttr('selected');
});
The selected value does not get added to the DOM element, and is therefore not an attribute of the option. You should use $.prop():
$("#testUpdate option[value='" + this.getCurrentSelectionValue() + "']").prop('selected', 'selected');
Fiddle
HTML
<select id="selectDepartment">
<option value="1">120</option>
<option value="2">20</option>
<option value="3">140</option>
<option value="4">4120</option>
<option value="5">560</option>
<option value="6">451</option>
<option value="7">310</option>
<option value="8">656</option>
<option value="9">444</option>
<option value="10">555</option>
<option value="11">2560</option>
<option value="12">450</option>
</select>
jQuery
$("#selectDepartment").change( function() {
alert($("select option:selected").val());
});
the above function always shows value 1 on alert, when I select any one of the options
Your method of finding the selection option is vague. You're saying "Grab all <select>s". You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.
Simply put, you're always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn't the first <select>, your value will never change.
Try to keep the scope to within the current <Select> using this:
$('#selectDepartment').change(function(){
var selopt = $('option:selected',this);
});
Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn't necessary as val() works just as easily:
var selopt = $(this).val();
Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you're working with a multi-select and want more control.
You can do something like this:
$("#selectDepartment").change( function() {
var selected = $(this).find(":selected");
});