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检查每个选择以确保初始值＆＃34;选择＆＃34;已更改 - 例如：已选择其他选项。如果它没有改变，我想改变选择颜色。

我已尝试过以下Jquery，但它没有完全正常运行：

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

注意：该页面有大约25个选项，我试图获得一个jquery来覆盖所有。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您必须自己迭代这些元素。幸运的是，它非常简单并且对您的代码进行了非常小的更改：

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

Answer 3

如果您需要检查所有选择，则必须测试一个或多个是否为“未选中”。为此，您可以这样做：

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

Answer 4

看看这个：.val()

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

JQuery检查多个Selects值

4 个答案: