Change opacity for select element if option is selected

Question

I have multiple select-elements like this:

<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>

Now I need to change the opacity to 0.5 for every select element which has a selected option after the page has loaded. I'm not quite sure if this can be done by pure CSS, so I tried to do that with JQuery:

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

But this is not correct as it doesn't work.

Answer 1

You need use change event instead of two .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

Make sure you assign an empty value to your default option. Then simply bind a change event to your select elements, trigger it once on page load (in case the selected value is not default) and use CSS for your hover opacity.

  $('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');
        }
    });
});