I have several drop downs in my page. on page load, I need to pull all the selected texts from the drop downs and do something. I have used this function to pull the selected text:
$(window).load(function() {
$("select").each(function() {
//get the selected texts here
alert($(this).text());
});
});
But this function pulls up all the values in the drop downs (not just the selected ones). How can I get only the selected text? I found 'option: selected' in web but how to use it along with $(this) selector? Please help.
You can use find with option:selected:
$(this).find('option:selected').text();
You can do this:
$("select :selected").each(function() {
//get the selected texts here
alert($(this).text());
});
If it's a multiselect or you want to get all selected options of all dropdowns on the page, then you can iterate over select > option:selected.
$("select > option:selected").each(function() {
//get the selected texts here
alert($(this).text());
});
For standard select with one possible selected option just grab:
var selectedText = $("select > option:selected").text();
The reason your code didn't work was because in your selector you did not indicate you wanted to retrieve all selected elements. This can be done with :selected.
Here's an example:
$(window).load(function() {
// Iterate through all selected elements
$("select :selected").each(function(index) {
// Get the selected texts here
alert("Item: " + index + " - Value: " + $(this).text());
// Or just alert($(this).text());
});
});
Look up:
.each()
:selected
Related
I need to run a function for each item in a drop down menu. The code is:
$( document ).ready(function() {
$('[id*="lwayer_x002d_EisDikigoros_1eef9a23-7a35-4dcf-8de9-a088b4681b2b"]')
.each(function(index) {
/* here, I need to do some manipulation on the item */
console.log("index is:"+???+"value is"+???);
});
});
I understand that i need to put something before each() to select all items but I don't know what to put
Thank you
The drop down menu is :
<select id="lwayer_x002d_EisDikigoros_1eef9a23-7a35-4dcf-8de9-a088b4681b2b_$LookupField" title="Εισ. Δικηγόρος/οι">
<option value="0">(None)</option> <option value="1">(Name1)</option> etc
.each(index, value) //2 parameter with index as well as value
In your case value returns the htmlElement as object so use
$(this).val()
so you can have
$('[id*="lwayer_x002d_EisDikigoros_1eef9a23-7a35-4dcf-8de9-a088b4681b2b"]
> option').
.each(function(index, value) {
console.log("index is:"+index+"value is"+$(this).val());
Try this:
$(document).ready(function(){
$('select[id*="lwayer_x002d_EisDikigoros_1eef9a23-7a35-4dcf-8de9-a088b4681b2b"] option').each(function(index,value) {
console.log("index is:"+index); // index
console.log("value is"+$(this).val()); // dropdown option value
console.log("dropdown text value is"+$(this).text()); //dropdown option text
});
});
DEMO
I think that It will help you.
$("#dropdownid option").each(function(){
/* write code what ever you want to do */
});
I have been trying to create a form which changes depending on the users entry. So far I have been successful in using a radio input to change which content is to be shown, but I am having trouble editing the JS to work with a drop down menu.
HTML
<div class="show-and-hide-content">
<select>
<option></option>
<option data-type="true">true</option>
<option data-type="false">false</option>
</select>
<div class="hidden content content-true">You have selected true.</div>
<div class="hidden content content-false">You have selected false.</div>
</div>
CSS
.hidden {
display:none;
}
Javascript
$(function () {
$('.show-and-hide-content').each(function (i) {
var $row = $(this);
var $selects = $row.find('select');
$selects.on('change', function () {
var type = $(this).attr('data-type');
$row
.find('.content').hide()
.filter('.content-' + type)
.show();
});
});
});
Working radio button JSFiddle
Non working drop down JSFiddle
I know that the JQuery is finding the right elements and is changing the display of them, but it never changes the display to make them visible. I think the problem may be that the JS isn't correctly getting the data-type variable from the option's.
I want the JQuery to work as intended and show the correct divs based on the users selection.
How can I amend the code to do this? Thanks for helping.
You now got:
var type = $(this).attr('data-type');
Since the function is called on the <select>, you select the data-type attribute of the <select> (which is defined), and not from the <option>.
So, you'll need to find the selected <option>:
var type = $(this).find('option:selected').attr('data-type');
Check the updated Fiddle.
[EDIT]
If you want to simplify your code, you could use this:
$(function () {
$('.show-and-hide-content select').on('change', function() {
$(this).parent().
find('.content').hide()
.filter('.content-' + $(this).find('option:selected').attr('data-type') ).show();
});
});
Demo.
Or change your select data-type to value and use
var type = $(this).val();
DEMO
Try this one
$(function () {
$('#select').on('change', function () {
var selctedval = $(this).val();
$('.content').hide();
$('.content-' + selctedval).show();
});
});
This will use whatever value you have in the "data-type" attribute and match it to the "content-" class that you have on the message. If there is no matching message then, no message will show.
$('.show-and-hide-content select').on('change', function(){
var selected = $(this).find('option:selected').data('type');
$('.content').addClass('hidden');
$('.content-' + selected).removeClass('hidden');
});
Here is a fiddle
I have an unordered list and I want to change the text on a button when a list item is clicked to the text in the list item. So far, I have:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text("hi");
});
});
This will change the button text to hi when any list item is clicked. How can I get the button to display the list item text? Do I need to pass the list item into the function?
try:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
Because this will refer to what you click.
Also, you can use
event.target.innerText
to get the clicked li text without jQuery
.text will give you the text
$(document).ready(function() {
$('.List-item').on("click",function(){
alert( $('option:selected', this).text());
var txt = $('option:selected', this).text();
});
});
Try This:
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
this refers to the object on which onclick is triggered.
You can try
$(document).ready(function() {
$('.List-item').on("click",function(){
$('#selectedOption').text($(this).text());
});
});
I have two select tags in my website. When I try to get the text of selected item in one select tag, I see that it returns the two texts of the two select tags, even if I specify which select to retrive data from via a class attribute.
My code is
$('select.select').change(function(e) {
e.preventDefault();
var val1 = $(' option:selected').text();
alert(val1);
});
$('select.select2').change(function(e) {
e.preventDefault();
var val2 = $(' option:selected').text();
alert(val2);
});
The alerts are always containing the text of the two select tags concatenated.
Your usual help is appreciated.
Perhaps update the selector to specify the context of the selection:
$('select.select').change(function(e) {
e.preventDefault();
var val1 = $('option:selected', this).text();
alert(val1);
return false;
});
The selector $('option:selected', this) will return values found within the context of the changed element.
It is because of this $('option:selected').text(); you have two selected option in your page so it returns two values.
You need to do this:
// Call the change event for the select
$('select.select').change(function (e) {
e.preventDefault();
// Get the selected option for the select in current scope
var text = $(this).find('option:selected').text();
alert(text );
//return false; No need of this, as we already called the preventDefault() method
});
you need to specify the class when you retrieve the value:
var val1 = $('.select option:selected').text();
and
var val2 = $('.select2 option:selected').text();
Initially my code was as follows, #ddlcompetition is an html <select> element.
$(document).ready(function () {
$('#ddlcompetition').val('#comp');
$("#ddlcompetition").change(function () { onSelectChange('#baseurl'); });
});
Where '#comp' has value of the corresponding query string parameter. But since it is in lower case, I want to iterate all <options> of the <select> element so that I can set the matching option as the selected option.
$('#ddlcompetition option').each(function(){
if($(this).text().toLowerCase() == comp.toLowerCase()){
$(this).attr('selected', 'selected'); //Select the matching option
}
});
var comp='#comp';
$('#ddlcompetition option').val(function(i,val){
return val.toLowerCase()==comp;
}).prop('selected',true).change(function () {onSelectChange('#baseurl'); });