1

我有一堆（确切的数字可能会有所不同）带有此代码的下拉列表：

<div id="wrapf">
  <div class="dropf">
    <select name="number" id="number" class="options">
      <option value="" rel="">Choose option!</option>
      <option value="1" rel="20">Option 1</option>
      <option value="2" rel="30">Option 2</option>
      <option value="3" rel="40">Option 3</option>
    </select>
  </div>
</div>

我正在尝试设置一个函数，如果我有 2 个（或更多）这些下拉列表显示，具有不同的选定值，我可以突出显示具有最高rel属性的选定选项的下拉列表......我将添加类.highlight到#wrapf包含最大下拉列表的那个rel....到目前为止我有这个：

突出显示 CSS

.highlight {
   box-shadow: 0px 0px 15px rgba(255, 40, 50, 0.4);
   -webkit-box-shadow: 0px 0px 15px rgba(255, 40, 50, 0.4);
   background: rgba(255, 40, 50, 0.4);
}

这是 jQuery：

$("#getMax").click(function () {
    var values = $.map($(".options"), function(el, index) {
        return parseInt($(el).find('option:selected').attr('rel')); 
});        

var max = Math.max.apply(null, values);
var opt = "[rel=" + max + "]";

//doesn't work :(
$('#wrapf').find('option:selected').attr(opt).addClass('highlight');


});​

我想我已经接近了，只需要最终的功能.addClass('highlight')！

4

1 回答 1

1

jsFiddle 演示

    $("#getMax").click(function (e) {
    var values = $.map($(".options"), function(el, index) {
        return $(el).find('option:selected').attr('rel'); 
        // parseInt() was originally creating a problem as [] turned into NaN
    });     

    var max = Math.max.apply(null, values);

    //works :)
    $('.wrapf').removeClass('highlight'); // remove all other references of highlight
    $('.wrapf').find('select option:selected[rel="' + max + '"]').closest('.wrapf').addClass('highlight');

    e.preventDefault(); // stops anchor from happening

});
于 2012-08-15T17:51:20.820 回答