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
Related
I have one html page where i have set of select menu like this give below.
<label>Product Details</label>
<select id="PD">
<xsl:for-each select="PRODUCT_DETAILS">
<option value="{DATA0}"><xsl:value-of select="DATA0"></xsl:value-of></option>
</xsl:for-each>
</select>
<label>Price Details</label>
<select id="PRD">
<xsl:for-each select="PRICE_DETAILS">
<option value="{DATA1}"><xsl:value-of select="DATA1"></xsl:value-of></option>
</xsl:for-each>
</select>
This select menu option is getting populated by some multi row xml as you can see. Now I if I select Product Details option number 2 then from price details ,option number 2 should get select auto.
I just wanted to know how to get which option number is get selected using jquery like say if i select if i selected option number 2 in Product Details it should give 2 as a result.
And based on this value how can i select option number 2 in price details using option number only using jquery.
I think you are looking for the index of the selected option
To get
var index = $('#selectid option:selected').index(); // it gives 0 based index
To set
$('#selectid option').eq(index).prop('selected', true)
Demo: Fiddle
try something like this
document.getElementById("mySelect").selectedIndex;
The selectedIndex property sets or returns the index of the selected option in a drop-down list.
The index starts at 0.
$('#myselect').get(0).selectedIndex;
Here is simple example:
In HTML:
<select id="myselect">
<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>
In JS:
$( "#myselect option:selected" ).index();
Read about .index() here. DEMO.
I have two drop down lists on my ASP.NET MVC 3. When one of the drop down lists is set to "Sole Proprietor", the other needs to be set to the same.
I'm sure the JavaScript, or jQuery, is very simple for something like this, however I am having a hard time finding a good example on the web since I am populating the drop down lists manually instead of through the controller.
Can someone either help me out with the code or point me to a good resource?
<select id="ProducerType" name="nmf" style="float:left;">
<option value="Principal">Principal</option>
<option value="Producer">Producer</option>
<option value="SoleProprietor">Sole Proprietor</option>
</select>
<select id="Role" name="nmf" style="float:left;">
<option value="Agent">Agent</option>
<option value="Financial Advisor">Financial Advisor</option>
<option value="Platform">Platform</option>
<option value="Principla_Owner">Principal/Owner</option>
<option value="Registered Rep">Registered Rep</option>
<option value="Sole Proprietor">Sole Proprietor</option>
</select>
jsFiddle example : http://jsfiddle.net/9GZQ2/
I set both dropdown values to "Sole Proprietor" your code has the space missing in the ProducerType select
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(function(){
$("#ProducerType").change(function(){
var value=$(this).val();
if(value=="Sole Proprietor") $("#Role").val(value);
});
$("#Role").change(function(){
var value=$(this).val();
if(value=="Sole Proprietor") $("#ProducerType").val(value);
});
});
</script>
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.
<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