CODEWITHSUNDEEP
javascriptjqueryhtml
Adam
Adam

Reputation: 20882

JQuery check multiple Selects value

I have a number of HTML selects like follows on one page:

<div>
<h3>Ethnicity</h3>
<select>
   <option value="select">Select</option>
   <option value="african">African</option>
   <option value="africanamerican">African American</option>
   <option value="asian">Asian</option>
</select>
</div>

I want to use Jquery to check each select to ensure the initial value "select" has been changed - eg: another options has been selected. If it hasn't changed I want to change the selects color.

I've tried the following Jquery but it's not fully functional:

    if($('select').val() == 'select') {
        alert('got one...');
        $(this).css({'color' : 'red'});
    }

Note: the page has around 25 selects and I'm try to get one piece of jquery to cover all.

Upvotes: 1

Views: 381

Answers (4)

DIEGO CARRASCAL
DIEGO CARRASCAL

Reputation: 2129

check out this: .val() 

$("select").each(function(){
    if($(this).val() == "YourDefaulValue"){
        $(this).css({'color' : 'red'});
    }
});

Upvotes: 1

gaetanoM
gaetanoM

Reputation: 42044

If you need to check all selects you have to test if one or more is "unselected". To achieve this you may do:

$(function () {
  $('#resetBtn').on('click', function(e) {
    $('select').each(function(index, element) {
      $(this).css({'color' : 'black'});
    });
  });
  $('#checkBtn').on('click', function(e) {
    $('select').each(function(index, element) {
      if (element.selectedIndex == 0) {
        alert('got one...');
        $(this).css({'color' : 'red'});
      }
    });
  });
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<button id="checkBtn">Check select</button>
<button id="resetBtn">Reset select</button>
<div>
    <h3>Ethnicity</h3>
    <select>
        <option value="select">Select</option>
        <option value="african">African</option>
        <option value="africanamerican">African American</option>
        <option value="asian">Asian</option>
    </select>
</div>

Upvotes: 1

Amit
Amit

Reputation: 46323

You have to iterate the elements yourself. Luckily, it's quite simple and a very small change to your code:

$('select').each(function() {
  var $this = $(this);
  if($this.val() == 'select') {
    // probably shouldn't alert here...
    // alert('got one...');
    $this.css({'color' : 'red'});
  }
}

Upvotes: 1

The Process
The Process

Reputation: 5953

You can use change event handler and check for selected value:
Check the snippet below

 $('select').on('change', function() {

   if ($(this).val() == 'select') {
     alert('got one...');
     $(this).css({
       'color': 'red'
     });
   } else {
     $(this).css({
       'color': 'initial'
     });
   }

 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h3>Ethnicity</h3>
  <select>
    <option value="select">Select</option>
    <option value="african">African</option>
    <option value="africanamerican">African American</option>
    <option value="asian">Asian</option>
  </select>
</div>

Upvotes: 4

Related Questions