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

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

jQuery dropdown query

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'); });

Using JavaScript or jQuery, how do I check if select box matches original value?

Just wondering if there is any way to check if the value of a select box drop-down matches the original value at the time of page load (when the value was set using selected = "yes") ?
I guess I could use PHP to create the original values as JavaScript variables and check against them, but there are a few select boxes and I'm trying to keep the code as concise as possible!

That's not too hard at all. This will keep track of the value for each select on the page:
$(document).ready(function() {
$("select").each(function() {
var originalValue = $(this).val();
$(this).change(function() {
if ($(this).val() != originalValue)
$(this).addClass('value-has-changed-since-page-loaded');
else
$(this).removeClass('value-has-changed-since-page-loaded');
});
});
});
This will apply a new class value-has-changed-since-page-loaded (which presumably you'd rename to something more relevant) to any select box whose value is different than it was when the page loaded.
You can exploit that class whenever it is you're interested in seeing that the value has changed.

$(document).ready(function() {
var initialSelectValue = $('#yourselect').val();
// call this function when you want to check the value
// returns true if value match, false otherwise
function checkSelectValue() {
return $('#yourselect').val() === initialSelectValue;
}
});
PS. You should use selected="selected" not selected="yes".

On page load, create an array with the initial value of each select box indexed by name:
var select_values = [];
$(document).ready(function() {
$("select").each(function() {
select_values[$(this).attr('name')] = $(this).val();
});
});
later when you need to check if a value has changed:
function has_select_changed(name) {
return $("select[name="+name+"]").val() != select_values[name];
}

First, a snippet:
$('select').each(
function(){
if( this.options[ this.selectedIndex ].getAttribute('selected') === null ){
alert( this.name +' has changed!')
}
});
Now the explanation:
Assuming selectElement is a reference to a <select /> elementYou can check which option is selected using
selectElement.selectedIndex
To get the <option /> element which is currently selected, use
selectElement.options[ selectElement.selectedIndex ]
Now when you know which option element is selected you can find out if this element has the selected='selected' attribute (as in the source code, it doesn't change - this is not the same as .selected propery of a DOM node, which is true for the currently selected option element and changes when the selection is changed)