Select dropdown value by a-tag button-CodePudding

On my page https://vidsk.dk/, I have a form that has a dropdown menu with 9 options. I also have nine corresponding buttons with a-tags. I want the user to be able to press the button and thereby select the corresponding value in the form dropdown menu.

My options:

<select>
<option value="Dansk">Dansk</option>
<option value="Engelsk">Engelsk</option>
<option value="Tysk">Tysk</option>
<option value="Fysik">Fysik</option>
<option value="Matematik">Matematik</option>
<option value="Samfundsfag">Samfundsfag</option>
<option value="Latin">Latin</option>
<option value="Spansk">Spansk</option>
<option value="Kinesisk">Kinesisk</option>
</select>

Example of an a-tag:

<a>Englsk</a>

Purpose: The user sees 9 big buttons and wants to click on his selection, which will change the form and nudge the user toward filling the rest of the form and sending it.

Page background: The page is made in WordPress which for some reason uses the a-tag rather than a button-tag for buttons. I would prefer not to have to replace the tag.

My Background: I am fairly versed in HTML and CSS and used to be okay with PHP, but that is 10 years ago. 100% self-taught. If a solution exists with only PHP, i.e., without Java or the like, I would prefer such. I have done extensive searches on this (2 hours ) but cannot find a solution.

CodePudding user response：

PHP is a server side language so you cannot change the selected value without rerendering the whole page which wouldn't be ideal.

You need to use JavaScript.

You can change the value of the dropdown by modifying the 'value' attribute.

function setSelect(val){
  document.getElementById("myselect").value = val;
}

<select id="myselect">
  <option value="Dansk">Dansk</option>
  <option value="Engelsk">Engelsk</option>
  <option value="Tysk">Tysk</option>
  <option value="Fysik">Fysik</option>
  <option value="Matematik">Matematik</option>
  <option value="Samfundsfag">Samfundsfag</option>
  <option value="Latin">Latin</option>
  <option value="Spansk">Spansk</option>
  <option value="Kinesisk">Kinesisk</option>
</select>

<div>
  <button onclick="setSelect('Latin')">Latin</button>
</div>

CodePudding user response：

You can try this:

<!DOCTYPE html>
<html>
    <head>
    
        <script type="text/javascript">
            function selectItem(itemValue)
            {
                document.querySelector('#mySelect').value = itemValue;
            }
        </script>
        
    </head>
    <body>
    
    <select id="mySelect">
        <option value="Dansk">Dansk</option>
        <option value="Engelsk">Engelsk</option>
        <option value="Tysk">Tysk</option>
        <option value="Fysik">Fysik</option>
        <option value="Matematik">Matematik</option>
        <option value="Samfundsfag">Samfundsfag</option>
        <option value="Latin">Latin</option>
        <option value="Spansk">Spansk</option>
        <option value="Kinesisk">Kinesisk</option>
    </select>

    <a onclick="selectItem(this.innerHTML)">Engelsk</a>
    <a onclick="selectItem(this.innerHTML)">Tysk</a>
    <a onclick="selectItem(this.innerHTML)">Fysik</a>
    <a onclick="selectItem(this.innerHTML)">Matematik</a>
    <a onclick="selectItem(this.innerHTML)">Samfundsfag</a>
    <a onclick="selectItem(this.innerHTML)">Latin</a>
    <a onclick="selectItem(this.innerHTML)">Spansk</a>
    <a onclick="selectItem(this.innerHTML)">Kinesisk</a>
    <a onclick="selectItem(this.innerHTML)">Dansk</a>

    </body>
</html>