Please help. You need to make the link relationship (a) c select option. Now it works when clicking a.select-change option changes, but I need to make sure that this link also adds a.selected class from the appropriate 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>

    1 answer 1

    but I need to make sure that this link still adds a.selected class

    Call the onclick $(this).addClass('selected') handler. And, to remove the old selection, first call

     $('.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>

    • Thanks for the answer, but a little something wrong ... It is necessary that the class be added to the link .order_by_wr a.select-change jsfiddle.net/y6byfxzs/3 - Osadchiy Yuriy
    • @OsadchiyYuriy What's wrong? - Anton Shchyrov
    • I need the link to stand out according to the selected select - Osadchiy Yuriy
    • @OsadchiyYuriy to select the clicked link? $(this).addClass('selected') - Anton Shchyrov
    • Thank. Yes, that’s right, but I’d also make it so that the class is deleted when you click on another link. - Osadchiy Yuriy