I have these divs (links) that can be clicked on.
I want to change a dropdown selection accordingly.
So if it’s clicked on select2, it would change the dropdown value to 666
If select3, it would change to 667
and so on.
I can’t modify dropdown values, however the target id’s CAN be exact as dropdown values, if that will make things easier to code.
I know there are some mistakes in my jQuery script.
Any help would be appreciated.
<script> const select = $('#sel2'); // Initialize at position 1 selectElement('665'); select.change(function() { selectElement($(this).val()); }) function selectElement(id) { $('#' + target).addClass("selected"); others.removeClass("selected"); } </script>
<a href="#1"><div style="display: inline-block; margin-bottom: 0.4em;" class="showSingle greenactive" target="01">select1</div></a> <a href="#2"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="02">select2</div></a> <a href="#3"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="03">select3</div></a> <a href="#4"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="04">select4</div></a> <a href="#5"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="05">select5</div></a> <a href="#6"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="06">select6</div></a> <a href="#7"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="07">select7</div></a> <a href="#8"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="08">select8</div></a> <a href="#9"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="09">select9</div></a> <a href="#10"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="10">select10</div></a> <a href="#11"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="11">select11</div></a> <br><br> <select name="usp-taxonomy-vertical[]" required="required" data-required="true" multiple="multiple" class="form-control" id="sel2"> <option value="665" selected="selected">665</option> <option value="666">666</option> <option value="667">667</option> <option value="668">668</option> <option value="669">669</option> <option value="670">670</option> <option value="671">671</option> <option value="672">672</option> <option value="673">673</option> <option value="674">674</option> <option value="675">675</option> <option value="676">676</option> </select> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
Advertisement
Answer
well, your Jquery code is a bit wrong, you need to add the select values to the <a>
(maybe in data attributes), then set a listener on <a>
fields that will trigger a function to change the select value
the full code will be like this :
$(".href").click(function(){ $(".select_a").val($(this).attr('data-value')).change(); });
<a href="#1" class="href" data-value = '665'><div style="display: inline-block; margin-bottom: 0.4em;" class="showSingle greenactive" target="01">select1</div></a> <a href="#2" class="href" data-value= '666'><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="02">select2</div></a> <a href="#3" class="href" data-value = '667'><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="03">select3</div></a> <br><br> <select name="usp-taxonomy-vertical[]" required="required" data-required="true" multiple="multiple" class="form-control select_a" id="sel2"> <option value="665" selected="selected">665</option> <option value="666">666</option> <option value="667">667</option> </select> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>