Message:

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>

My Answer:
Here is a sample code snippet that achieves the functionality you described:

html







    Dropdown Selection According to Selected Div

    





    Select 1


    Select 2


    Select 3

In this code snippet, when a div is clicked, its id is stored in the `selectedDiv` variable. Then, the value of the dropdown is set to the value of the selected div using `$("#dropdown").val(selectedDiv);`.

You can add more divs and corresponding dropdown values as needed.

Rate this post

3 of 5 based on 4001 votes

John Davidson

php - Make a dropdown selection according to the selected div (with jQuery)

Rate this post

Comments