I have several input type="select" with the same class. All with the same option values. I'm iterating through an array and checking if the option value is in it. If it is then I want all those relevant option values to be selected. I tried with this JQuery but it doesn't update the select dropdown with the selected values:
JS
$(".contacts option").each(function() {
var x = $(this);
if($.inArray(x.val(), selected_values)!= -1){
x.prop('selected', true);
}
});
HTML
<select class="form-control contacts" name="publicPermissions" id="publicPermissions" multiple="multiple">
<option value="share">Share</option>
<option value="private">Private</option>
<option value="user">User Config</option>
<option value="work">Work</option>
</select>
I have several of these selects how can I update them all so they all have the relevent option values selected?
You just need to use .val() method. No need to use loop.
$(".contacts").val(selected_values);
DEMO
After you put some values in selected_values array, it should work. Here is a fiddle
Is there a way to select the latest user's selected value of a dropdown?
Eg:
<select id="data" name="data" class="data" multiple="multiple">
<option value="100">foo</option>
<option value="101">bar</option>
<option value="102">bat</option>
<option value="103">baz</option>
</select>
If I use something like the bellow example, what I get is the last index, but it's not what I want.
var latest_value = $("option:selected:last",this).val();
What I want is something like: if you select "bar", I get 101, if you select "foo" I get 101 instead of 100.
OBS: all my examples are considering that the user is selecting multiple values, not just one.
Use this simple js code:
var is_now_selected = document.getElementById('data').value;
// or with jQuery
var is_now_selected = $('#data').val()
Maybe you don't know that the option-value accually is the value of the select. If you click <option value="something"> which is inside a <select name="select_me">, then this select will have the value of the selected option - in this case - "select_me".
You can write this code. It may help you.
Please let me know if you have anymore problem.
$("#data").change(function () {
alert($("#data").val());
});
If I say have the following element, how do I change the selected value in it dynamically from jquery? (I know there are alot of threads of this subject here and I have tried them but I just coudn't get it to work)
<div class="styledDropDown">
<form name="viewBeds" method="post" action="formhandler.cgi">
<select name="title" onchange="javascript:showHideBeds();">
<option selected value="All">All</option>
<option value="Hannes">Hannes</option>
</select>
</form>
</div>
I want to switch between these values so that the selected value becomes "Hannes" instead of "All".
How is this done easiest?
Trid the following without success
function showHideBeds(){
$('.styledDropDown').val('Hannes');
}
Hope you understood the question =)
You need to set the .val() for the select element, $('.styledDropDown') is a div
This will do
$('.styledDropDown select').val('Hannes');
Demo: Fiddle
You can do
$("select[name='title'][value='Hannes']").attr("selected", "selected");
You can change the current value with
$('#setSelectedOne').click(function(){
$("#title option[value='Hannes']").attr('selected',true);
});
But I do not understand why you would do that with Javascript as the browser has its own do deal with Select boxes...
I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?
This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.
It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/
You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/
Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.
please use this code instead,
$('#selectId option:selected').val();
All right, say I have this:
<select id='list'>
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
</select>
What would the selector look like if I wanted to get "Option B" when I have the value '2'?
Please note that this is not asking how to get the selected text value, but just any one of them, whether selected or not, depending on the value attribute. I tried:
$("#list[value='2']").text();
But it is not working.
If you'd like to get the option with a value of 2, use
$("#list option[value='2']").text();
If you'd like to get whichever option is currently selected, use
$("#list option:selected").text();
It's looking for an element with id list which has a property value equal to 2.
What you want is the option child of the list:
$("#list option[value='2']").text()
This worked perfectly for me, I was looking for a way to send two different values with options generated by MySQL, and the following is generic and dynamic:
$(this).find("option:selected").text();
As mentioned in one of the comments. With this I was able to create a dynamic function that works with all my selection boxes that I want to get both values, the option value and the text.
Few days ago I noticed that when updating the jQuery from 1.6 to 1.9 of the site I used this code, this stop working... probably was a conflict with another piece of code... anyway, the solution was to remove option from the find() call:
$(this).find(":selected").text();
That was my solution... use it only if you have any problem after updating your jQuery.
Based on the original HTML posted by Paolo I came up with the following.
$("#list").change(function() {
alert($(this).find("option:selected").text()+' clicked!');
});
It has been tested to work on Internet Explorer and Firefox.
$("#list option:selected").each(function() {
alert($(this).text());
});
for multiple selected value in the #list element.
If there is only one select tag in on the page then you can specify select inside of id 'list'
jQuery("select option[value=2]").text();
To get selected text
jQuery("select option:selected").text();
Try the following:
$("#list option[value=2]").text();
The reason why your original snippet wasn't working is because your OPTION tags are children to your SELECT tag, which has the id list.
This is an old Question which has not been updated in some time the correct way to do this now would be to use
$("#action").on('change',function() {
alert($(this).find("option:selected").text()+' clicked!');
});
I hope this helps :-)
I wanted to get the selected label. This worked for me in jQuery 1.5.1.
$("#list :selected").text();
$(this).children(":selected").text()
You can get selected option text by using function .text();
you can call the function like this :
jQuery("select option:selected").text();
$("#list [value='2']").text();
leave a space after the id selector.
While "looping" through dynamically created select elements with a .each(function()...): $("option:selected").text(); and $(this + " option:selected").text() did not return the selected option text - instead it was null.
But Peter Mortensen's solution worked:
$(this).find("option:selected").text();
I do not know why the usual way does not succeed in a .each() (probably my own mistake), but thank you, Peter. I know that wasn't the original question, but am mentioning it "for newbies coming through Google."
I would have started with $('#list option:selected").each() except I needed to grab stuff from the select element as well.
Use:
function selected_state(){
jQuery("#list option").each(function(){
if(jQuery(this).val() == "2"){
jQuery(this).attr("selected","selected");
return false;
}else
jQuery(this).removeAttr("selected","selected"); // For toggle effect
});
}
jQuery(document).ready(function(){
selected_state();
});
I was looking for getting val by internal field name instead of ID and came from google to this post which help but did not find the solution I need, but I got the solution and here it is:
So this might help somebody looking for selected value with field internal name instead of using long id for SharePoint lists:
var e = $('select[title="IntenalFieldName"] option:selected').text();
A tip: you can use below code if your value is dynamic:
$("#list option[value='"+aDynamicValue+"']").text();
Or (better style)
$("#list option").filter(function() {
return this.value === aDynamicValue;
}).text();
As mentioned in jQuery get specific option tag text and placing dynamic variable to the value
I needed this answer as I was dealing with a dynamically cast object, and the other methods here did not seem to work:
element.options[element.selectedIndex].text
This of course uses the DOM object instead of parsing its HTML with nodeValue, childNodes, etc.
As an alternative solution, you can also use a context part of jQuery selector to find <option> element(s) with value="2" inside the dropdown list:
$("option[value='2']", "#list").text();
I wanted a dynamic version for select multiple that would display what is selected to the right (wish I'd read on and seen $(this).find... earlier):
<script type="text/javascript">
$(document).ready(function(){
$("select[showChoices]").each(function(){
$(this).after("<span id='spn"+$(this).attr('id')+"' style='border:1px solid black;width:100px;float:left;white-space:nowrap;'> </span>");
doShowSelected($(this).attr('id'));//shows initial selections
}).change(function(){
doShowSelected($(this).attr('id'));//as user makes new selections
});
});
function doShowSelected(inId){
var aryVals=$("#"+inId).val();
var selText="";
for(var i=0; i<aryVals.length; i++){
var o="#"+inId+" option[value='"+aryVals[i]+"']";
selText+=$(o).text()+"<br>";
}
$("#spn"+inId).html(selText);
}
</script>
<select style="float:left;" multiple="true" id="mySelect" name="mySelect" showChoices="true">
<option selected="selected" value=1>opt 1</option>
<option selected="selected" value=2>opt 2</option>
<option value=3>opt 3</option>
<option value=4>opt 4</option>
</select>
You can get one of following ways
$("#list").find('option').filter('[value=2]').text()
$("#list").find('option[value=2]').text()
$("#list").children('option[value=2]').text()
$("#list option[value='2']").text()
$(function(){
console.log($("#list").find('option').filter('[value=2]').text());
console.log($("#list").find('option[value=2]').text());
console.log($("#list").children('option[value=2]').text());
console.log($("#list option[value='2']").text());
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<select id='list'>
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
</select>
Try this:
jQuery("#list option[value='2']").text()
Try
[...list.options].find(o=> o.value=='2').text
let text = [...list.options].find(o=> o.value=='2').text;
console.log(text);
<select id='list'>
<option value='1'>Option A</option>
<option value='2'>Option B</option>
<option value='3'>Option C</option>
</select>