如果选择了选项，则更改选择元素的不透明度

Question

我有多个这样的选择元素：

<li>
    <select>
        <option>select something</option>
        <option value="1">something</option>
        <option value="2">anything</option>
    </select>
</li>
<li>
    <select>
        <option>select something</option>
        <option value="1">something</option>
    </select>
</li>
<li>
    <select>
        <option>select something</option>
        <option value="1">something</option>
    </select>
</li>

现在，我需要在页面加载后将每个具有选定选项的选择元素的不透明度更改为0.5。 我不太确定这是否可以通过纯CSS完成，所以我尝试使用JQuery来做到这一点：

$('select').each(function(select) {
    $('select option').each(function() {
        if($(this).is(':selected')) {
            select.css({ opacity: 0.5 });
        }
    });
});

但这是不正确的，因为它不起作用。

Answer 1

您需要使用change事件而不是两个.each

 function isNotEmpty(element) { return ($('option:selected', element).attr('value') || '').length; } $('select').on('change mouseout',function () { $(this).css({ opacity: isNotEmpty(this) ? 0.5 : 1 }); }).on('mouseover', function () { $(this).css({ opacity: 1 }) }).change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <select> <option>select something</option> <option value="1">something</option> <option value="2">anything</option> </select> </li> <li> <select> <option>select something</option> <option value="1">something</option> </select> </li> <li> <select> <option>select something</option> <option value="1">something</option> </select> </li> </ul> 

Answer 2

确保为默认选项分配一个空值。 然后只需将change事件绑定到您的select元素，在页面加载时触发一次（如果所选值不是默认值），然后将CSS用于您的悬停不透明度。

  $('select').on('change', function() { if (this.value) { $(this).css('opacity', '0.5'); } else { $(this).css('opacity', '1'); } }).change(); 

 select:hover { opacity: 1!important } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <ul> <li> <select> <option value="">select something</option> <option value="1">something</option> <option value="2">anything</option> </select> </li> <li> <select> <option value="">select something</option> <option value="1" selected="selected">something</option> </select> </li> <li> <select> <option value="">select something</option> <option value="1">something</option> </select> </li> </ul> 

Answer 3

$('select').each(function(select) {
    $('select option').each(function() {
        if($(this).is(':selected')) {
            $(this).parent.css('opacity', '0.5');
        }
    });
});