Как установить цвет select в зависимости от option

Question

есть select который принимает два значения Male и Female и в зависимости от пола он должен менять цвет в select, сделал чтоб цвет задавался после того как выберу одно из значений, но как сделать так, чтоб задавался уже при загрузки страницы

<select class="form-control" name="gender" id="gender">
      <option value="Male">Мужской</option>
     <option value="Female">Женский</option>
 </select>
 
 <script>
    
$(document).ready(function () 
{
    $('#gender').on('change', function () 
    {
            var selectedValue = $('#gender').val();
           if(selectedValue === 'Male'){
             $(this).css('color','blue')
           }
           else if(selectedValue === 'Female'){
                $(this).css('color','red')
           }   
    });
});
</script>

Answer 1

Надо просто при загрузке триггернуть то самое событие на том самом элементе и всё.

$('#gender').on('change', function() {
  var selectedValue = $('#gender').val();
  if (selectedValue === 'Male') {
    $(this).css('color', 'blue')
  } else if (selectedValue === 'Female') {
    $(this).css('color', 'red')
  }
});

$(document).ready(function() {
  $('#gender').trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<select class="form-control" name="gender" id="gender">
  <option value="Male">Мужской</option>
  <option value="Female">Женский</option>
</select>

Answer 2

Так можно:

$.fn.checkGender = function() {
  var selectedValue = $(this).val();
  if (selectedValue === 'Male') {
    $(this).css('color', 'blue')
  } else if (selectedValue === 'Female') {
    $(this).css('color', 'red')
  }
}

$(document).ready(function() {
  $('#gender').checkGender()
  $('#gender').change(function(){
      $(this).checkGender();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<select class="form-control" name="gender" id="gender">
  <option value="Male">Мужской</option>
  <option value="Female" selected>Женский</option>
</select>

БЛОГ НА HUSL

Как установить цвет select в зависимости от option

Ответы (2 шт):