Develop Reference

Need to get empty Dropdown ID

I have a web form and Dropdown Box. We can clone dropdown and can create some more. My problem is needs to know any of them are empty. My every dropdown id is begin with 'abcd'.
For example
<select id='abcd_1'></select>
<select id='abcd_3'></select>
<select id='abcd_10'></select>
<select id='abcd_5'></select>
I tried following code but no luck
$( "input[id^='abcd']" ).val();

Try to use :empty selector to filter out the required elements,
var emptySelects = $( "select[id^='abcd']" ).filter(function(){
return $(this).is(':empty');
});
or simply,
var emptySelects = $("select[id^='abcd']:empty");
And if you want to traverse it just use .each()
emptySelects.each(function(){
console.log(this.id);
});

Try this
$('select').each(function(){
if($(this).find('option').length == 0){
alert($(this).attr('id'))
}
});
DEMO

If you want to check if dropdowns are empty then you can use this:
if( $( "select[id^='abcd']").has('option').length > 0 ) {
Because you have multiple dropdowns , you must repeat the code above with $.each:
$.each($( "select[id^='abcd']"), function(i, dropdown){
if ($(dropdown).has('option').length == 0){
alert($(dropdown).attr('id'));
}
})
I made an example: http://jsfiddle.net/mihutz/M3FfZ/

Get dropdown selected Text from "This" inside JS function

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

Jquery drop-down menu: how to each() for each item

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 */
});

How to reset fields values out of html form with jQuery

How to reset <INPUT> and <TEXTAREA> values with jquery click() if these elements are not part of any <FORM>?

You can reset the values using defaultValue property, both HTMLTextAreaElement and HTMLInputElement support the property, the default value is the value as originally specified in HTML that created these objects.
$('#reset').on('click', function() {
$('input, textarea').val(function() {
return this.defaultValue;
});
});
In case that you only want to reset the values of inputs and textareas that don't belong to a form element you can use .filter() method:
$('#reset').on('click', function() {
$('input, textarea').filter(function() {
return !this.form;
}).val(function() {
return this.defaultValue;
});
});
If the form property is null the input/textarea is not descendant of a form element.
http://jsfiddle.net/E2tbk/

This works:
var elements = $('input,textarea');
$('button').click(function () {
elements.each(function () {
if (!this.form) this.value = this.defaultValue;
});
})
Fiddle

use this:
document.getElementById('yourInputID').value = "";

This solution stores the initial values in the data-oldvalue attribute of the element. When you click the restore button it sets the values back to the initial ones.
Some pointed out you should use .html() to set the value of the textarea. I tried this but it did not set the value while .val() did
$("input").each(function() {
$(this).attr("data-oldvalue", $(this).val());
});
$("textarea").each(function() {
$(this).attr("data-oldvalue", $(this).html());
});
$("button").click(function() {
console.log($(this).attr("data-oldvalue"));
$("input").each(function() {
$(this).val($(this).attr("data-oldvalue"));
});
$("textarea").each(function() {
$(this).val($(this).attr("data-oldvalue"));
});
});
See: http://jsfiddle.net/zvPK7/

Try this:
$('#click').on('click', function() {
$("input[type='text'], textarea").val('');
});

Try This...
$('#btnID').click(function(){
$('#FormID')[0].reset();
});

jquery returns the text of selected item in select tag plus text of selected item in other select tag

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();