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....私はこれまでにこれを持っています：#wrapfrel

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 に答える