Picture link that triggers drop-down select option without prior selection

Question

I would like a link to select a specific option of a select statement without having to select it first. Just to be clear, I am not trying to have one button/link trigger whichever option has been selected before, I want multiple links trigger one select option each as an alternative to using the drop-down itself.

If we take the following code e.g., how would I trigger the "away" option by this link?

<div class="collection-sort">
      <label></label>
      <select>
            <option>Select</option>
            <option value="home">Home</option>
            <option value="away">Away</option>
        </select>
    </div>

<a href="#away">
    <img src="http://via.placeholder.com/100x100">
    </a>

Anthony L · Accepted Answer · 2018-03-03T00:00:32.593

1

You should listen for a click on the #away element and change the value of the select field accordingly. Something like this:

$(document).on("click", "#away", function(){
  $("select").val("away").change();
});

Here is a working example

    <html>  
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <style>
          .wrap > .icon:last-of-type{
            color: red;
          }
        </style>
        <script type="text/javascript">
          $(document).ready(function(){
            $(document).on("click", "#away", function(){
              $("select").val("away").change();
            });
          });
        </script>
      </head>
      <body>
        <div class="collection-sort">
          <label></label>
          <select>
            <option>Select</option>
            <option value="home">Home</option>
            <option value="away">Away</option>
          </select>
        </div>

        <a href="#away" id="away">
          <img src="http://via.placeholder.com/100x100">
        </a>
        
      </body>
    </html>

edited Mar 03 '18 at 00:00

answered Mar 02 '18 at 23:54

Anthony L

1,940
8
23

It's a different question, but maybe you have an idea: Clicking the link triggers the option but also visually jumps to the drop down position. a) Is there a way to offset the landing, e.g. 100px up b) What would I need to do to make this vertical jump smoother? – Mar 03 '18 at 00:21
You can avoid the jump all together by removing the anchor in the link href="#away" . In fact, getting rid of the A tag all together in this context probably makes sense. You can move the listener to the image tag itself and get the same result, but without the jump. – Anthony L Mar 03 '18 at 00:22
A bit extra info: The drop-down option opens a body below based on the selection. Ideally it would scroll smoothly down to have the whole content body on top. – Mar 03 '18 at 00:35
There are a number of different ways to solve that sort of problem. Anchor links or a bit of jquery will both help. Here's a potential solution: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element – Anthony L Mar 03 '18 at 00:40
I will play around with it after work. Again, thanks for your help! – Mar 03 '18 at 00:46

fyasir · Answer 2 · 2018-03-03T00:09:09.510

You can use this handleSelect method on multiple link with proper option value.

function handleSelect(option) {
  var optionElm = document.getElementById(option);
  if(optionElm) {
   optionElm.selected = !optionElm.selected;
  }
}

<div class="collection-sort">
      <label></label>
      <select>
            <option>Select</option>
            <option id="home" value="home">Home</option>
            <option id="away" value="away">Away</option>
        </select>
    </div>

<a href="#away" onclick=handleSelect("away")>
    <img src="http://via.placeholder.com/100x100">
</a>

Picture link that triggers drop-down select option without prior selection

2 Answers2