I am trying to populate a textfield with the value of whatever is in my dropdown box. Now all I get right now is the ID for the selected item, first in the list is 1, etc.
I know its got to be something stupid that I am missing but I can't see it at the moment.
How do I get the value of the selected item, instead of the ID?
Here is what I have so far, #id_maturity_letter is the dropdown and #message_text is the textarea I am trying to populate.
$("#id_maturity_letter").change(function() {
var id = $(this).val();
$('#message_text').val($('#id_maturity_letter').val());
$.getJSON('', {id:id}, function(json) {
});
});
Your code is correct, be sure that your html is created as you wish:
<select id='id_maturity_letter'>
<option id='1' value='1'>one</option>
<option id='2' value='2'>two</option>
<option id='3' value='3'>three</option>
</select>
will of course return a value that is equal to the id
So if you need the text:
$("#message_text").val( $("option:selected", this).text() );
If I understand your question correctly, you want the text of the selected option instead of its value. If that's actually the case, you can match the selected <option> element with the :selected selector, then call text() on the resulting object:
$("#id_maturity_letter").change(function() {
var id = $(this).val();
$("#message_text").val($("option:selected", this).text());
});
Related
i'm struggling with a question, how i can get the value from comma separated select option value and append the second value to a other select option?
My html looks
<select id="firstSelecter_ID1">
<option value"first value, second value, third value">option1</option>
<option value"first value, second value, third value">option2</option>
<option value"first value, second value, third value">option3</option>
<option value"first value, second value, third value">option4</option>
</select>
<select id="secondSelecter_ID2">
<option value"second value">option1-a</option>
<option value"second value">option2-a</option>
<option value"second value">option3-a</option>
<option value"second value">option4-a</option>
</select>
var entry6 = $('#Id_6')
entry6.on('change', 'select#firstSelecter_ID1', function (e) {
...
option value ,second .append() to #secondSelecter_ID2 as new option value =""
...
}
Many thanks if somebody can give me the idea and I hope I have asked the question right and understandable
Regards Maty
Try something like
$('#select_1 option').each(function(){
var secondVal = this.value.split(',')[1].trim(),
$opt = $('<option>').val(secondVal).text($(this).text());
$('#select_2').append($opt);
});
Ok, i got it to work how i need it...
entry1.on('change', 'select#actiontypeSelect', function (e) {
$("select#secondSelecter_ID2 option:eq(1)").remove();
$("select#secondSelecter_ID2 option:last").remove();
$('select#actiontypeSelect').each(function () {
var value1 = $('select#actiontypeSelect').find("option:selected").val();
var secondVal = value1.split(',')[1].trim(),
$opt = $('<option>').val(secondVal).text('Exclusive Equipment');
$('#secondSelecter_ID2').append($opt);
console.log(value1);
});
$("select#secondSelecter_ID2").append('<option value="0.00">Inclusive Equipment</option>');
e.preventDefault();
});
This gives me from the selected option the second value and append as a new option with the value to other select box.
Special thanks to #charlietfl he gives me the right way.
How can I put selected value of jquery multiselect dropdown into a hidden element's id? I need that id be an array so I can get the selected values of the multiselect into that.
What I tried is:
$( "#Myselect" ).change(function(){
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).val() + " ";
});
document.getElementById("objecttype").value = str;
}).trigger( "change" );
<html:hidden styleId="objecttype" property="objecttype" name="Myobjecttype"/>
but objecttype is just an id and isn't an array!
I assume you want this hidden field to be posted somewhere and used later on (server-side or whatever). Take a look at this Fiddle: http://jsfiddle.net/hm71689h/ it is roughly what you wanted.
Take into account what Haxxxton just said: you're joining the values using a delimiter (in this example a comma by default). You need to split that value into a new array later on.
Also, in your code-sample, you're referring to the hidden field using: document.getElementById("objecttype")
But you did not use an identifier, you used a name. Although you might think it should be the same, an ID is not the same as the name of an element.
I think you need smth like this:
HTML:
<select name="choice" multiple id="mySelect">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="hidden" name="myObjecttype" />
JS:
$('#mySelect').change(function(){
//brand new array each time
var foo = [];
//fills the array
foo = $("option:selected", this).map(function(){ return $(this).val() }).get();
//fills input with vals, as strings of course
$("input[name='myObjecttype']").val(foo);
//logs an array, if needed
console.log($("input[name='myObjecttype']").val().split(','));
});
Don't forget hidden input can't store array-/object- data, only strings. But you can easily make array.
See working jsfiddle: http://jsfiddle.net/sfvx5Loj/1/
I am wondering how I can retrieve the text of the selected item in a dropdown using JQuery. Currently the code I have retrieves the value and I actually need the text associated with that value.
This is my code:
var stockCode = $(this).closest('li').find('.stock_code').html();
var quantity = $(this).closest('li').find('.order_amount').val();
var growers = $(this).closest('li').find('.growers').val();
var sharequantity = $(this).closest('li').find('.share_amount').val();
This is HTML
<span class="bulk" style="">
<select name="CMP Member" id="CMP Member" class="growers">
<option value="0">Choose Grower to Share...</option>
<option value="10">xxxxx</option>
<option value="25">xxxxx</option>
<option value="4">xxxxxx</option>
<option value="6">xxxxxx</option>
</select>
I required the text at xxxxx...
Many thanks for any help. Also must point out I've got multiple dropdowns being generated dynamically so I would need to reference it by class.
Try this:
$('.growers option:selected').text()
Use val() for the option value attribute and text() for the text inside the option:
$(".growers option:selected").text();
You have to get it by using the :selected selector along with the .text() function
var growers = $(this).closest('li').find('.growers option:selcted').text();
I have to get the selected option data whose option value is known. I have the selected option value and I want the data which is wrapped between the option.
For example in the following select:
<select name="oi_report_contact[sex]" id="oi_report_contact_sex">
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Other</option>
</select>
I have value 1, I need to get the data "Male" through Jquery or Javascript.
Please note : $('#oi_report_contact_sex').val(); will give 1 and not male, when 1 is selected.
You just have to call
var content = $('#oi_report_contact_sex option:selected').html();
to get the inner content of the selected option.
You can use .text() method to get the text value. Like this.
$('#oi_report_contact_sex').on('change', function () {
alert($('#oi_report_contact_sex').val());
alert($('#oi_report_contact_sex option:selected').text());
});
$("#oi_report_contact_sex").find('option:selected').text();
You can try:
$("#oi_report_contact_sex option[value='" + $("#oi_report_contact_sex").val() + "']").text()
jsFiddle link: http://jsfiddle.net/ARBb2/1/
i am using javascript to get the text of selected item from dropdown list.
but i am not getting the text.
i am traversing the dropdown list by name..
my html dropdownlist is as:
<select name="SomeName" onchange="div1();">
<option value="someVal">A</option>
<option value="someOtherVal">B</option>
<option value="someThirdVal">C</option>
</select>
and my javascript is as:
function div1() {
var select = document.getElementsByName("SomeName");
var result = select.options[select.selectedIndex].text;
alert(result);
}
can you please help me out..
Option 1 - If you're just looking for the value of the selected item, pass it.
<select name="SomeName" onchange="div1(this.value);">
<option value="someVal">A</option>
<option value="someOtherVal">B</option>
<option value="someThirdVal">C</option>
</select>
function div1(val)
{
alert(val);
}
Option 2 - You could also use the ID as suggested.
<select id="someID" name="SomeName" onchange="div1();">
<option value="someVal">A</option>
<option value="someOtherVal">B</option>
<option value="someThirdVal">C</option>
</select>
function div1()
{
var ddl = document.getElementById("someID");
var selectedText = ddl.options[ddl.selectedIndex].value;
alert(selectedText);
}
Option 3 - You could also pass the object itself...
<select name="SomeName" onchange="div1(this);">
<option value="someVal">A</option>
<option value="someOtherVal">B</option>
<option value="someThirdVal">C</option>
</select>
function div1(obj)
{
alert(obj.options[obj.selectedIndex].value);
}
getElementsByName returns an array of items, so you'd need:
var select = document.getElementsByName("SomeName");
var text = select[0].options[select[0].selectedIndex].text;
alert(text);
Or something along those lines.
Edit: instead of the "[0]" bit of code, you probably want either (a) to loop all items in the "select" if you expect many selects with that name, or (b) give the select an id and use document.getElementById() which returns just 1 item.
The problem with the original snippet posted is that document.getElementsByName() returns an array and not a single element.
To fix the original snippet, instead of:
document.getElementsByName("SomeName"); // returns an array
try:
document.getElementsByName("SomeName")[0]; // returns first element in array
EDIT: While that will get you up and running, please note the other great alternative answers here that avoid getElementsByName().