Develop Reference

jQuery: using ".each" for a select's options by $(this)

I know there are a lot of similar questions but I still could not find one about my exact problem. I haven't got the selector of my <select>; I am iterating form fields and so i only got access to my select by using $(this).
how can I iterate this select's options by using jQuery's '.each' function?
i tried to chain it, but this doesn't work:
$(this).$('option').each(function(){
if (this.value == val) {
// do something
}
});
note: $(this) is my select not my form.

Try this : you can use .find() to get option under select.
Note: - this.value refers to current option value inside loop.
$(this).find('option').each(function(){
if (this.value == val) {
// do something
}
});

Because your this is a reference to the select element you also have access to its .options property which you can wrap in a jQuery object:
$( this.options ).each( function(i, option){
if (this.value == val) {
// do something
}
});
http://jsfiddle.net/x57d8msL/

$.each($('select'), function (key, val){
console.log($(val));
});

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

Using Jquery to show and hide elements based on an input

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 want to get all textbox values using jquery and make them all null on onchange event

I'm trying to get all values within a form using jQuery
and want to set all those as a value null.
Now I have text also and hidden fields also.
<input id="MYNAME_04cd1197-7147-4b82-9b0a-c44846405150"
type="text"
value="MyName"/>
<input id="MYID_12cd1112-7147-4b82-9b12-c412846125112"
type="hidden"
value="f208b514-133b-4d6d-8299-f5f002e131a0"/>
There are many textboxes like this.
May I know what is the syntax to get all these textboxes and set null as value to [type="text]"
and 00000000-0000-0000-0000-000000000000 to [type=hidden] inputs.
I tried something like:
function resetAllValues() {
debugger;
$('#TransactionGrid').find("input:text").each(function (index) { });
}

You can do something like this:
$('form > input').val('');
But this everyone will tell to you in different ways.
What you should know is:
Your html element must have the attribute NAME, if you want to get all the values from the form(as you commented). You can't use $('#frm1').serialize() for example.

try this:
$('#TransactionGrid').find("input[type='text']").each(function (index) {
//get value
var val = $(this).val();
//set this value to ''
$(this).val('');
//to hide
$(this).hide();
});

$('#TransactionGrid').find("input[type=\'text\']").each(function (index) {
//Setting the value to null i.e '';
$(this).val('');
//if u want to hide it u can use .hide...
$(this).hide();
});

Try with this
function resetAllValues() {
$("input:text", "#TransactionGrid").val('');
$("input:hidden", "#TransactionGrid").val('00000000-0000-0000-0000-000000000000');
}

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