Develop Reference

Why can't I change text of select option?

I have an html select with options inside. With jQuery I'm able to select and read option's text but I'm unable to modify it using either .html('my_text') and .text('my_text).
Here is my HTML :
<select id="select_format_date" name="select_format_date">
<option id='0' value="0">jj/mm/yyyy</option>
<option id='1' value="1">jj mm</option>
<option id='2' value="2">jj month short</option>
<option id='3' value="3">jj month full</option>
</select>
And here are my attemps to modify their texts with jQuery :
alert($("#select_format_date option[id='0']").text());
$("#select_format_date option[id='0']").text('TEST');
$("#select_format_date option[id='0']").html('TEST');
As said the alert display the option's text correctly so the selector is good but I can't modify the text I don't understand why, my jQuery is in a $(document).ready(function() {}) so the DOM should be fully loaded. Both HTML and jQuery are in the same file. I also tried to add the .change() but didn't work.
Any ideas of what could cause that ?
Thanks for you time reading and helping.
EDIT
Problem solved I had a plugin .jqTransform messing up with my html, thanks for you time !!

As you can see in the below snippet, both .text() and .html() worked for me.
$(document).ready(function() {
alert($("#select_format_date option[id='0']").text());
//$("#select_format_date option[id='0']").text('TEST');
$("#select_format_date option[id='0']").html('TEST');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_format_date" name="select_format_date">
<option id="0" value="0">jj/mm/yyyy</option>
<option id="1" value="1">jj mm</option>
<option id="2" value="2">jj month short</option>
<option id="3" value="3">jj month full</option>
</select>
Maybe your jQuery is not loaded or some error may stop the parse process somewhere in the rest of your code?

you don't need to define a id for your options, just try this
("#select_format_date").val('value').change();
this is a fastest and simple way to change the selected value and text of select tag with jquery in my opinion.

get the text value in the dropdown with class

how to get the selected text of the option.
<select class="float-left groupNames" name="Group">
<option value="preview[object Object]0">test</option>
<option value="preview[object Object]1">test1</option>
<option value="preview[object Object]2">test2</option>
</select>
I tried $(".groupNames option:selected").text();
but its not the right value. so I am getting testtest2 if I am selecting the third option.

$(".groupNames").val() is all you need.
jsFiddle example
However if you have multiple .groupNames elements, you'll need to be more specific with the selector.
$(".groupNames option:selected").text(); as you probably saw, will get the selected option's text, not the select's value.

hi please add an id to easily access the select here is an tested fiddle http://jsfiddle.net/elviz/259m3qkb/1/
$("#newSkill").change(function(){
var kamote = document.getElementById("newSkill").options[document.getElementById('newSkill').selectedIndex].text;
alert(kamote);
});

Change text inside dynamic div when on select change is made jquery

I have a title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.
I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.
Here is my html:
<div class="shippingStateDiv">
<span id="shippingStateSpan">Destination State<br />
</span>
<select name="shippingState" id="shippingState" class="shippingDropDown"
onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
<option value="-1" selected="selected">Please Select</option>
<option value="129654">AB</option>
<option value="129653">BC</option>
<option value="129652">MB</option>
<option value="129647">NB</option>
</select>
</div>
Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.
<script type="text/javascript">
$("#shippingStateSpan").text("Destination Province");
</script>

Try this:
$(document).ready(function(){
var $select = $('#shippingState'),
$span = $('#shippingStateSpan');
$select.on('change', function(){
$span.html('Destination Province');
});
});

Try this
​$(function() {
$('#shippingState').on('change', function() {
$('#shippingStateSpan').text('Destination Province')
});
});​
Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/

How to ensure a <select> form field is submitted when it is disabled?

I have a select form field that I want to mark as "readonly", as in the user cannot modify the value, but the value is still submitted with the form. Using the disabled attribute prevents the user from changing the value, but does not submit the value with the form.
The readonly attribute is only available for input and textarea fields, but that's basically what I want. Is there any way to get that working?
Two possibilities I'm considering include:
Instead of disabling the select, disable all of the options and use CSS to gray out the select so it looks like its disabled.
Add a click event handler to the submit button so that it enables all of the disabled dropdown menus before submitting the form.

Disable the fields and then enable them before the form is submitted:
jQuery code:
jQuery(function ($) {
$('form').bind('submit', function () {
$(this).find(':input').prop('disabled', false);
});
});

<select disabled="disabled">
....
</select>
<input type="hidden" name="select_name" value="selected value" />
Where select_name is the name that you would normally give the <select>.
Another option.
<select name="myselect" disabled="disabled">
<option value="myselectedvalue" selected="selected">My Value</option>
....
</select>
<input type="hidden" name="myselect" value="myselectedvalue" />
Now with this one, I have noticed that depending on what webserver you are using, you may have to put the hidden input either before, or after the <select>.
If my memory serves me correctly, with IIS, you put it before, with Apache you put it after. As always, testing is key.

I`ve been looking for a solution for this, and since i didnt find a solution in this thread i did my own.
// With jQuery
$('#selectbox').focus(function(e) {
$(this).blur();
});
Simple, you just blur the field when you focus on it, something like disabling it, but you actually send its data.

I faced a slightly different scenario, in which I only wanted to not allow the user to change the selected value based on an earlier selectbox. What I ended up doing was just disabling all the other non-selected options in the selectbox using
$('#toSelect').find(':not(:selected)').prop('disabled',true);

it dows not work with the :input selector for select fields, use this:
jQuery(function() {
jQuery('form').bind('submit', function() {
jQuery(this).find(':disabled').removeAttr('disabled');
});
});

Same solution suggested by Tres without using jQuery
<form onsubmit="document.getElementById('mysel').disabled = false;" action="..." method="GET">
<select id="mysel" disabled="disabled">....</select>
<input name="submit" id="submit" type="submit" value="SEND FORM">
</form>
This might help someone understand more, but obviously is less flexible than the jQuery one.

The easiest way i found was to create a tiny javascript function tied to your form :
function enablePath() {
document.getElementById('select_name').disabled= "";
}
and you call it in your form here :
<form action="act.php" method="POST" name="form_name" onSubmit="enablePath();">
Or you can call it in the function you use to check your form :)

I use next code for disable options in selections
<select class="sel big" id="form_code" name="code" readonly="readonly">
<option value="user_played_game" selected="true">1 Game</option>
<option value="coins" disabled="">2 Object</option>
<option value="event" disabled="">3 Object</option>
<option value="level" disabled="">4 Object</option>
<option value="game" disabled="">5 Object</option>
</select>
// Disable selection for options
$('select option:not(:selected)').each(function(){
$(this).attr('disabled', 'disabled');
});

Just add a line before submit.
$("#XYZ").removeAttr("disabled");

Or use some JavaScript to change the name of the select and set it to disabled. This way the select is still submitted, but using a name you aren't checking.

I whipped up a quick (Jquery only) plugin, that saves the value in a data field while an input is disabled.
This just means as long as the field is being disabled programmaticly through jquery using .prop() or .attr()... then accessing the value by .val(), .serialize() or .serializeArra() will always return the value even if disabled :)
Shameless plug: https://github.com/Jezternz/jq-disabled-inputs

Based on the solution of the Jordan, I created a function that automatically creates a hidden input with the same name and same value of the select you want to become invalid. The first parameter can be an id or a jquery element; the second is a Boolean optional parameter where "true" disables and "false" enables the input. If omitted, the second parameter switches the select between "enabled" and "disabled".
function changeSelectUserManipulation(obj, disable){
var $obj = ( typeof obj === 'string' )? $('#'+obj) : obj;
disable = disable? !!disable : !$obj.is(':disabled');
if(disable){
$obj.prop('disabled', true)
.after("<input type='hidden' id='select_user_manipulation_hidden_"+$obj.attr('id')+"' name='"+$obj.attr('name')+"' value='"+$obj.val()+"'>");
}else{
$obj.prop('disabled', false)
.next("#select_user_manipulation_hidden_"+$obj.attr('id')).remove();
}
}
changeSelectUserManipulation("select_id");

I found a workable solution: remove all the elements except the selected one. You can then change the style to something that looks disabled as well.
Using jQuery:
jQuery(function($) {
$('form').submit(function(){
$('select option:not(:selected)', this).remove();
});
});

<select id="example">
<option value="">please select</option>
<option value="0" >one</option>
<option value="1">two</option>
</select>
if (condition){
//you can't select
$("#example").find("option").css("display","none");
}else{
//you can select
$("#example").find("option").css("display","block");
}

Another option is to use the readonly attribute.
<select readonly="readonly">
....
</select>
With readonly the value is still submitted, the input field is grayed out and the user cannot edit it.
Edit:
Quoted from http://www.w3.org/TR/html401/interact/forms.html#adef-readonly:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful.
When it says the element may be succesful, it means it may be submitted, as stated here: http://www.w3.org/TR/html401/interact/forms.html#successful-controls

jQuery get specific option tag text

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>