Question

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

<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')的最终功能！

Answer 1

jsFiddle DEMO

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

});

jQuery查找具有最大选择“rel”属性的下拉列表

1 个答案: