jQuery檢查多個選擇值

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檢查每個選擇，以確保初始值“選擇”已更改-例如：已選擇另一個選項。 如果沒有更改，我想更改選擇的顏色。

我已經嘗試了以下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> 

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