<td class="value" style="width:40%;">
<select>
<option value="1">one</option>
<option value="1">two</option>
<option value="1">three</option>
</select>
</td>
I am finding the val() by using below code:
$(this).closest("td").next().find("select").each(function(){
selectValues.push($(this).val());
});
Please refer this JSFiddle. I want to get the innerHTML of the Option using val().
Like: $(this).val().innerHTML
Please suggest any way.
You need the text of the selected option so
selectValues.push($(this).find('option:selected').text());
Demo: Fiddle
Try like this:
$('td select option [value=1]').text();
For getting selected option inner text use this
selectValues.push($(this).find('option:selected').html());
or
selectValues.push($(this).find('option:selected').text());
For getting selected option value
selectValues.push($(this).val()); // It return value of the option
Your code is work perfect only problem is HTML Code you are set all <option> element value="1" that's why this problem occur now you can check following jsFiddle
Check Demo jsFiddle
Update HTML
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Hope this help you!
Get it with .text()
selectValues.push($(':selected',this).text());
Check your fiddle
Even you can use .map() method to create arrays:
var selectValues = $(this).closest("td").next().find("select").map(function(){
return $(':selected',this).text();
});
use text()
$(this).closest("td").next().find("select").each(function(){
selectValues.push($(this).text());
});
Related
This code works perfect on my localhost but not working on my clients site why ?
JQUERY
function someClickEventFunction(){
$("#checkin").val("2").change();
}
HTML
<select id="checkin">
<option value="1">Default</option>
<option valeu="2">Blah</option>
</select>
When this code runs the select options get cleared instead of changing !
Try once
<select id="checkin">
<option value="1">Default</option>
<option value="2">Blah</option>
</select>
I found a typo(valeu="2") in your html. Also, I don't think you need to trigger change() event just to change value.
Here you go:
function someClickEventFunction(){
$("#checkin").val("2");
}
someClickEventFunction()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="checkin">
<option value="1">Default</option>
<option value="2">Blah</option>
</select>
Hope this helps!
Thanks,
Ashok
I have a select input with a few options, and a jQuery code who show a div when you select a certain option.
At moment i'm using this :
$('#id_treatment_type').val() == '1'
It work great on chrome, but not in firefox. When I set the mouse on the option (whitout clicking) it change the value of the option.
On Chrome it work because the value change only when I clicked on the option.
The problem is that I have to put this in a loop because I have way to many fields to set a .change on everyone
window.setInterval(function(){alerts();}, 5000);
I would set this interval to a few ms because I need to show the div faster.
I need to have it work on firefox but I don't know how if someone have an idea. Sorry for my english, but I hope you could understand what i'm trying to say.
Thank you
You can use the change event. Example
$('#id_treatment_type').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_treatment_type" id="id_treatment_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I made a fiddle with a small example:
https://jsfiddle.net/usz5pyhv/
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<div id="whenValOne">Value is one</div>
$(function() {
$("#mySelect").change("change", function() {
if(this.value == 1)
$("#whenValOne").show();
else
$("#whenValOne").hide();
});
});
I have following select list from which user can select multiple option
<select size="6" onblur="validatevalumethod()" multiple="" id="valumethod[]" name="valumethod[]">
<option value="0">Select Asset</option>
<option value="OC">ORIGINAL COST</option>
<option value="OCUIP">ORIGINAL COST USING INDEXED PRICES</option>
<option value="RC">REPLACEMENT COST</option>
<option value="OCCR">ORIGINAL COST CONSIDERING REVALUATION</option>
<option value="OCUIPCR">ORIGINAL COST USING INDEXED PRICES & CONSIDERING REVALUATION</option>
<option value="RCCR">REPLACEMENT COST CONSIDERING REVALUATION</option>
</select>
I need to fetch the value selected by user in javascript but dont know how to do this please help me.
With jQuery you could do
$("#list option:selected").text(); to get the text of the selected option
$("#list option:selected").val(); to get the value behind the selected option
EDIT:
where #list is the id of your select tag
I think that the following solution is better to fetch VALUES :
$("#list option:selected").val();
Here's a very simple code that tells you how many you selected on every change:
For the Html Code:
<html>
<body>
<select multiple="true">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</body>
</html>
​Use this jQuery Code:
$("select").change(function() {
alert($("option:selected").length);
});
Here's a live example:
http://jsfiddle.net/hesher/3M36e/
You can use pure javascript as in :
document.getElementById('valumethod[]').value
<select id="my-select">
<option value="1">This is one</option>
<option value="2" selected>This is two</option>
...
</select>
Is there a way to get the text value of the selected option?
$('#my-select').val();
gives me 2, i want to get This is Two instead.
How?
What you want is
Get the selector for finding the selected option in the select box
Use .text() on the selector.
$('#my-select option:selected').text();
See a working demo
Take the below HTML select for an example:
<select name="selValues" id="selValues">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
If we write the following jQuery statement:
$('#selValues').val('2'); // Two will get selected
$('#selValues').val('3'); // 3 will get selected instead of 5??
Why is it like that?
Use
$("#selValues option[value='3']").attr('selected', 'selected');
Also a good article on
jQuery - Select elements - tips and tricks
The val() method gets or sets the selected text. You may want to use selectedIndex instead:
$('#selValues').get(0).selectedIndex=2;
When selecting options jQuery looks first at the value then at the text of an option. It also goes through options in order. So, $('#selValues').val('3') selects options 3 first, but right after that changes selection to option 4 (as it has the text "3"). Use a multiple select to see that in fact both options are selected
<select name="selValues" id="selValues" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
As of JQuery 1.4 this has now been made unambiguous. It will now select by value, not by text value http://jquery14.com/day-01#backwards
If you do need to still select by value then a suggested method is here