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.
Related
I have a select list:
<option ng-repeat="hour in Hours"
value="{{hour.Value}}"
ng-show="filterEvent($index)"
ng-selected="hour.Value == EventDate || $first">
{{hour.Text}}
</option>
And I want the first element that is not hidden to be automatically selected. Right now if I hide the first elements it wont change the selected index.
How can I do this?
just hide the first option
<select ng-model="hour" required="required"
ng-options="hour.value as hour for hour in hours" >
<option style="display:none" value="">select a type</option>
</select>
Angular tends to ignore the selected atributte, if you want an element to be selected simply give your select a ng-model and set the value you want selected to your model variable.
<select ng-model="selectValue" name="mySelect">
<option ng-repeat="hour in Hours"
value="{{hour.Value}}"
ng-show="filterEvent($index)"
>
{{hour.Text}}
</option>
</select>
And, in your controller use a forEach to find the first visible value of your array and asign it's value to your model variable.
There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.
You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').
DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...
If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));
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