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

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>

CodePudding user response：

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").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" 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>

CodePudding user response：

You need to use attribute of your link to select right option.

I used your target attribute to do it.

// Initialize at position 1
selectElement('665');

$('.showSingle').click(function() {
  selectElement($(this).attr('target'));
})

function selectElement(target) {
  console.clear();
  console.log(target);
  
  // we save current element in const
  const currectSelectedElementTarget = $('#sel2 option[value="'   target   '"]');
  
  // remove attr selected for all options in select #sel2
  $("#sel2 > option").removeAttr("selected");

  // we add selected class and attr to the current clicked element
  currectSelectedElementTarget.addClass("selected").attr('selected', 'selected');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#1"><div style="display: inline-block; margin-bottom: 0.4em;" class="showSingle greenactive" target="665">select1</div></a>
<a href="#2"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="666">select2</div></a>
<a href="#3"><div style="display: inline-block; margin-bottom: 0.4em" class="showSingle" target="667">select3</div></a>
<br><br>

<select name="usp-taxonomy-vertical[]" required="required" data-required="true" multiple="multiple"  class="form-control" id="sel2">
   <option value="665">665</option>
   <option value="666">666</option> 
   <option value="667">667</option>   
 </select>