自動選擇從下拉菜單中如果只有兩個選擇

Question

我得到了2名選擇的下拉列表中，有時只有2個選項每個

「請選擇」和「真實的選項」。

在這種情況下，我希望它自動選擇「True Option」。 「True Option」的值不總是相同的，但「Please Select」值總是空的，所以我需要選擇一個非空值的值。

if ($('.product-options .inputbox').size() == 2) { 
 
    $('.product-options .inputbox').not(.val('')).attr('selected', true); 
 
}

<div class="product-options"> 
 
    <div id="option-98" class="options_class"> 
 
    <div> 
 
     <strong>Size:</strong> 
 
     <select id="options98" class="inputbox" name="options[98]" onchange="updatePrice();"> 
 
     <option value="" selected="selected">--- Please Select ---</option> 
 
     <option value="99">Small</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div id="option-99" class="options_class"> 
 
    <div> 
 
     <strong>Color:</strong> 
 
     <select id="options99" class="inputbox" name="options[99]" onchange="updatePrice();"> 
 
     <option value="" selected="selected">--- Please Select ---</option> 
 
     <option value="100">Black</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

可以使用.each功能遍歷選擇。

$(function(){ 
 
    $("select").each(function(i, e){ 
 
    var $e = $(e); 
 
    
 
    if($e.children().length == 2){ 
 
     $e.find("option[value='']").attr("selected", false); 
 
     $e.find("option[value!='']").attr("selected", true); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="product-options"> 
 
<div id="option-98" class="options_class"> 
 
    <div> 
 
     <strong>Size:</strong> 
 
     <select id="options98" class="inputbox" name="options[98]" onchange="updatePrice();"> 
 
      <option value="" selected="selected">--- Please Select ---</option> 
 
      <option value="99">Small</option> 
 
     </select> 
 
    </div> 
 
</div> 
 
<div id="option-99" class="options_class"> 
 
    <div> 
 
     <strong>Color:</strong> 
 
     <select id="options99" class="inputbox" name="options[99]" onchange="updatePrice();"> 
 
      <option value="" selected="selected">--- Please Select ---</option> 
 
      <option value="100">Black</option> 
 
     </select> 
 
    </div> 
 
</div> 
 
<div id="option-100" class="options_class"> 
 
    <div> 
 
     <strong>Select with 3 values:</strong> 
 
     <select id="options100" class="inputbox" name="options[100]" onchange="updatePrice();"> 
 
      <option value="" selected="selected">--- Please Select ---</option> 
 
      <option value="100">One</option> 
 
      <option value="101">Two</option> 
 
     </select> 
 
    </div> 
 
</div> 
 
</div>