Сделать взаимосвязь ccылки с value select option

409

24 ноября 2016, 09:55

Прошу помощи. Нужно сделать взаимосвязь ссылки (a) c select option. Сейчас работает при клике a.select-change меняется option, но мне нужно сделать так, чтобы этой ссылке еще добавлялся класс a.selected из соответствующего option selected="selected".

(function($) { 
  $('.select-change').click(function() { 
    $('#orderby').val($(this).data('val')).trigger('change'); 
  }) 
})(jQuery);

a { 
  padding:10px; 
  color:green; 
} 
a.selected { 
  color:red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="order_by_wr"> 
 
  <a data-role="button" data-val="menu_order" class="select-change" id="btna">Name</a> 
  <a data-role="button" data-val="popularity" class="select-change" id="btnb">Popular</a> 
  <a data-role="button" data-val="price-desc" class="select-change" id="btnc">Price</a> 
  
 
  <form class="woocommerce-ordering" method="get"> 
    <select name="orderby" class="orderby" id="orderby"> 
      <option value="menu_order" selected="selected">Name</option> 
      <option value="popularity">Popular</option> 
      <option value="price-desc">Price</option> 
    </select> 
  </form> 
</div>

Answer 1

но мне нужно сделать так, чтобы этой ссылке еще добавлялся класс a.selected

Вызовите в обработчике onclick $(this).addClass('selected'). А, чтобы удалить старое выделение предварительно вызовите

$('.select-change').removeClass('selected');

(function($) { 
  $('.select-change').click(function() { 
    $('.select-change').removeClass('selected'); 
    $('#orderby').val( 
      $(this).addClass('selected').data('val') 
    ).trigger('change'); 
  }) 
})(jQuery);

a { 
  padding: 10px; 
  color: green; 
} 
a.selected { 
  color: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div class="order_by_wr"> 
 
  <a data-role="button" data-val="menu_order" class="select-change" id="btna">Name</a> 
  <a data-role="button" data-val="popularity" class="select-change" id="btnb">Popular</a> 
  <a data-role="button" data-val="price-desc" class="select-change" id="btnc">Price</a> 
 
 
  <form class="woocommerce-ordering" method="get"> 
    <select name="orderby" class="orderby" id="orderby"> 
      <option value="menu_order" selected="selected">Name</option> 
      <option value="popularity">Popular</option> 
      <option value="price-desc">Price</option> 
    </select> 
  </form> 
</div>