javascript - JQuery 检查多个 Selects 值

Question

我在一个页面上有许多 HTML 选择，如下所示:

<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>

我想使用 Jquery 检查每个选择以确保初始值“select”已更改 - 例如:已选择另一个选项。如果它没有改变，我想改变选择的颜色。

我尝试了以下 Jquery，但它的功能还不完善:

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

注意:该页面有大约 25 个选择，我试图让一个 jquery 来覆盖所有。

Answer 1

您可以使用更改事件处理程序并检查所选值:
检查下面的片段

 $('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>