I have a select and I want it's selected option to change but I can't make it happen for some reason. This is the code that I have.
$("#ID option[value=grpValue]").prop('selected', 'selected').change();
If instead of using "grpValue" I type in the value manually for example value "3" it does work. But I want it to use grpValue.
So this for example does work.
$("#ID option[value=3]").prop('selected', 'selected').change();
What am I doing wrong in the first line?
Would appreciate the help, thanks in advance.
EDIT: I've already tried using option[value='grpValue'], doesn't work.
$(document).ready(function(){
$("#sel option[value='c']").attr("selected",true);
$("#sel option[value='c']").prop("selected",true);
});
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<body>
<form>
<select id="sel">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</form>
</body>
</html>
you can use any one from prop() or attr() method both of useful
Is grpValue a variable? If so
$("#ID option[value="+grpValue+"]").prop('selected', 'selected').change();
will make the attribute selector do the work.
BTW, I think
$obj.prop('selected', true);
is the correct expression for prop.
$('#id_of_select').val('value_of_option_here');
Edit: To explain why the above code works. The first part:
Is the jQuery we use the following method to select an element by it's id, we could also select an element by it's class by simply changing the '#' to a '.'.
$('#id_of_select')
The statement following it refers to the value attribute that is attached to every input, select, textarea and button. The value is the string that is passed through when a form is submitted. For inputs this is the typed text, for selects it's the value of the selected option.
When we click an option in a select field, what we are actually doing is grabbing the value of the option and setting it as the selects value also, selects know what value is selected via the value, it can then grab the option text associated with this value. The code below (with a parameter) will set the value of the select field, in the same way it would if you were to click the option.
Note .val must have a parameter otherwise you are just asking jQuery what the value of the selected field is. With a value will set, without a value will get.
.val('value_of_option_here');
Hope this is a little more useful than my original answer, I've tried to break it down as much as possible though if it's a little confusing let me know.
Working example :
$("#ID option[value='b']").prop('selected', 'selected').change();
// if value in variable just replace $("#ID option[value="+valueInVar+"]")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ID" >
<option value = "a">a</option>
<option value = "b">b</option>
<option value = "c">c</option>
</select>
Related
I have a very basic question. I want to select the SELECTED text and dropdown value from the dropdown and show in the alert box.
My attempt:
Dropdown
<p id="test">
Select a draft:
<select id="Select" name="Select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</p>
JS
$("#Select").change(function()
{
alert($(this).val()); // IF THIS WORKS FINE THEN NEXT LINE CODE SHOULD WORK TOO
alert($(this).text()); // WHY THIS SHOWS ALL THE DROPDOWN TEXTS
alert($("#Select option:selected").text()); // THIS JUST WORKS FINE
});
Question 1: What $(this) signifies? If it's signifies selected element then it should show the text also when doing $(this).text(). BUT IT DOESN'T work as expected.
Question 2: If I need to select the value and text of the dropdown is above mentioned is the efficient way to go about it.
Please guide me.
My JSFIDDLE Attempt
In your change event handler, $(this) is the <select> element.
The element represented by $(this) depends on the context where it is used.
It usually is the element which triggered an event (like here), or the element targeted by the iteration of an .each() loop, for example.
When an <option> is selected, the <select> take its selected option value as a value...
It doesn't do it for the text of the selected option.
So that is why the second alert() statement doesn't work.
The keyword this in your example represents the element on which the event triggered. This means the select element. .text() return all text included in the element, so it gives all elements. .val() returns the value of an input, in this case it will return the value of the select, but beware as it does not return more than one value if you set mutiple=true.
Since we now know that .text() returns the text, and this is the input that changed, we can deduct that you'd prefer using .val() to get the value as it may differ from the display text.
alert($(this).find("option:selected").val());
$(this) is used to make the this object a JQuery object which includes some extra functionality.
You can try this if you want to get the selected item value and text:
$(this).find(":selected").val(); // Gets the value of the selected option, if the value attribute in the option element is null it will give you the text
$(this).find(":selected").text(); // Gets the text of the selected option
hi the 'this' part is the raw DOM element from javascript $(this) makes it a jquery object, so you can use jquery. In this case it's the select.
If I need to select the value and text of the dropdown is above mentioned is the efficient way to go about it.
Yes it's fine.
jQuery get specific option tag text
Answer to question 1:
$(this) means that you pass this to the $ function. In other words, you create a jQuery object from the this object. In your context, this refers to the elements matching the #Select selector: your select element.
$(this).text() is working normally because internally it calls innerText on the select tag: which contains the DOM code of your select and innerText contains all the text (not HTML) of the children of the select.
Answer to question 2:
To retreive the label of the selected option: $("#Select option:selected").text()
To retreive the value of the selected option: $("#Select option:selected").val()
You can alter what you already have written by changing this:
alert($(this).val() + $(this).text());
to:
alert($(this).val() + $("option:selected", this).text());
And overall giving you the code you already have.
$("#Select").change(function()
{
alert($(this).val() + $("option:selected", this).text());
alert($("#Select option:selected").text());
});
$(this) is just selecting the identified object that you are choosing to use 'change' on which in this case is the select box.
$("#Select").change(function() binds the function defined after this point to the HTML element <select id="Select" name="Select">. Therefore within that function, $(this) refers to that Select element. The information within that select element is: <option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>. This is why $(this).text() will give you all the options; you're asking for all the text inside that element.
($this).val() gets you the value of the overall select element, which is the text of the currently selected option.
this refers to the context which was used to invoke the function.
When you change the select option, this refers to the whole select dropdown.
If you look below, when I print the value of $(this).val, it gives the function which returns the value of the selected option.
Whereas, when I print the value of $(this).text, it gives the function which gives the whole select dropdown inner text.
To answer your second question, I think $(this).val() is more efficient as by using $(this) will always refer to the context which invokes the function. Thus, you can create modular code using it, by separating the use of anonymous function into a named function and using it for other select dropdown in your site, if you want in the future.
$("#Select").change(function()
{
console.log($(this).val);
console.log($(this).text);
console.log($(this).val()); // IF THIS WORKS FINE THEN NEXT LINE CODE SHOULD WORK TOO
console.log($(this).text()); // WHY THIS SHOWS ALL THE DROPDOWN TEXTS
console.log($("#Select option:selected").text()); // THIS JUST WORKS FINE
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test">
Select a draft:
<select id="Select" name="Select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</p>
I am attempting to retrieve and set the selected value of a select element (drop down list) with jQuery.
for retrievel i have tried $("#myId").find(':selected').val(), as well as $("#myId").val() but both return undefined.
Any insight into this problem would be much appreciated.
to get/set the actual selectedIndex property of the select element use:
$("#select-id").prop("selectedIndex");
$("#select-id").prop("selectedIndex",1);
The way you have it is correct at the moment. Either the id of the select is not what you say or you have some issues in the dom.
Check the Id of the element and also check your markup validates at here at W3c.
Without a valid dom jQuery cannot work correctly with the selectors.
If the id's are correct and your dom validates then the following applies:
To Read Select Option Value
$('#selectId').val();
To Set Select Option Value
$('#selectId').val('newValue');
To Read Selected Text
$('#selectId>option:selected').text();
$('#myId').val() should do it, failing that I would try:
$('#myId option:selected').val()
When setting with JQM, don't forget to update the UI:
$('#selectId').val('newValue').selectmenu('refresh', true);
$("#myId").val() should work if myid is the select element id!
This would set the selected item: $("#myId").val('VALUE');
Suppose you have created a Drop Down list using SELECT tag like as follows,
<select id="Country">
Now if you want to see what is the selected value from drop down using JQuery then, simply put following line to retrieve that value..
var result= $("#Country option:selected").text();
it will work fine.
I know this is old but I just had a bear of a time with Razor, could not get it to work no matter how hard I tried. Kept coming back as "undefined" no matter if I used "text" or "html" for attribute. Finally I added "data-value" attribute to the option and it read that just fine.
<option value="1" data-value="MyText">MyText</option>
var DisplayText = $(this).find("option:selected").attr("data-value");
$( "#myId option:selected" ).text(); will give you the text that you selected in the drop down element. either way you can change it to .val(); to get the value of it . check the below coding
<select id="myId">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>`
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Try this
$('#your_select_element_id').val('your_value').attr().add('selected');
I have a following dropdown:-
<select id="myselct">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
I wanna change the first value (value=0) from One to a different text.
Something like this that I tried didn't work:-
$("select#myselect option[value='One']").val("Change Value");
Try,
$("#myselect option[value='0']").val("Change Value");
You are passing the text content as the value. That is the problem.
If you still want to use the text content then use :contains() selector,
$("#myselect option:contains(One)").val("Change Value");
But note that :contains() selector is a case sensitive one. Be careful while use it.
If you want to change the text of the option, then use,
$("#myselect option[value='0']").text("Change Value");
There are several ways to achieve what you need, considering this has been answered I will just add some additional ways to address the issue, maybe someone will find those useful.
All these will change the text of the first entry in the dropdown list:
//First three examples change the first child regardless of value;
$('#mySelect option:first-child').text("Change Value");
$('#mySelect').find('option').first().text("Change Value");
$('#mySelect option').eq(0).text("Change Value");
//Assuming the first element has a value of "0";
$('#mySelect option[value="0"]').text("Change Value");
If you'd like to change the value, not the text then you can use .val() instead of .text().
Note: I have changed the ID of your select in my example to 'mySelect', because there was a slight typo.
This will automatically change from given value to to be change value.
code below to replace one with change value
$('#myselct option').each(function() {
$(this).text($(this).html().replace(/\bOne\b/g, 'Change Value'));
});
You can update the content of option with calling the .text("Change Value") function on the query result. Like so:
$("select#myselect option[value='1']").text("Change Value");
Alternatively you could query by option content:
$("select#myselect option:contains('One')").text("Change Value");
In the html you misspelled the id attribute of select.
I have a drop down list (DDL)...
I would usually just use $('#ddl option:selected').val()
but I have stored the jQuery object...
var myDDL = $('#ddl');
I can't figure out how I would use the variable myDDL alongside with option:selected
Not sure how to word my question really...
You simply need to call val() on the select object to get the selected value.
$('#ddl').val()
To get the variable just for the sake of knowing you can use find
selectedVal = myDDL.find('option:selected').val();
The .val() method is primarily used to get the values of form elements
such as input, select and textarea. In the case of select elements, it
returns null when no option is selected and an array containing the
value of each selected option when there is at least one and it is
possible to select more because the multiple attribute is present, jQuery Docs
Please try this.
Call this below function to see the effects.
----------------------- JS-Code -----------------------
TestFunction();
function TestFunction() {
var myDDL = $('#ddl');
var selectedVal = myDDL.find('option:selected').val();
alert(selectedVal);
}
-------------------- HTML Code --------------------------
<div id="divTest">
<select id="ddl">
<option>one</option>
<option selected="selected">two</option>
</select>
</div>
HTML:
<select id="ddlCountry" name="ddlCountry">
<option selected="selected" value="1">India
</option>
<option value="2">USA
</option>
</select>
JQuery:
$('#ddlCountry').val()
I hope this helps. If this does resolve your problem, please mark the post as answered.
Thanks,
Prashant
Try with this:
myDDL.find('option:selected').val();
As myDDL is a jQuery object, so you can use .find() method to get the selected value.
I am looking to duplicate the value of a select input into a second input field using Javascript. I tried to do this using an onchange event call. What should the js code be in order to populate the input field id ='sort' upon change in the select function?
Here is my code
<input id = "sort">
<select name="sort_select" onchange="document.getElementById('sort').value = ('#sort_select').val();">
<option value="Ascending"> Ascending</option>
<option value="Descending"> Descending</option>
</select>
This does not work. I see the error lies in value assignment (('#sort_select').val();)What is the correct way to do this?
JS solution: FIDDLE
change this:
<select name="sort_select" onchange="document.getElementById('sort').value = ('#sort_select').val();">
to
<select name="sort_select" onchange="document.getElementById('sort').value = this.value;">
Use this code
$("select").change(function(){
$("#sort").val($(this).val());
});
Fiddle
http://jsfiddle.net/5S7mh/
onChange="document.getElementById('sort').value = (this.options[this.selectedIndex]).value;"
Don't use that big ugly line as inline JS though.
Also, start with populating the input box.