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.

Just change opacity, because I want to set the opacity back to 1 on a mouseover-event — user3142695, Nov 07 '15 at 07:09
a `select` element with options always has one option selected... what exactly are you trying to do — But those new buttons though.., Nov 07 '15 at 07:33
@billynoah I'm thinking of a selected option except the default one (=first option without value) — user3142695, Nov 07 '15 at 07:37
none of the options in your question have a value. please update your question and respective code to illustrate exactly what you are trying to achieve. — But those new buttons though.., Nov 07 '15 at 07:51
@billynoah I have updated the post. If 'select something' is selected the opacity should be 1. If anything else is selected it should be 0.5 — user3142695, Nov 07 '15 at 08:01

Oleksandr T. · Answer 1 · 2015-11-07T08:48:22.567

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>

But those new buttons though.. · Accepted Answer · 2015-11-07T08:46:59.497

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>

score 1 · Answer 3 · answered Nov 07 '15 at 07:28

1

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

answered Nov 07 '15 at 07:28

Alok Kumar Mishra

169
16

Change opacity for select element if option is selected

3 Answers3