Select a-tag 按钮的下拉值

Question

在我的页面 https://vidsk.dk/ 上，我有一个表单，其中包含一个包含 9 个选项的下拉菜单。我还有九个带有 a 标签的相应按钮。我希望用户能够按下按钮，从而 select 表单下拉菜单中的相应值。

我的选择：

<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>

a 标签示例：

<a>Englsk</a>

目的：用户看到 9 个大按钮并想单击他的 selection，这将更改表单并促使用户填写表单的其余部分并发送。

页面背景：该页面是在 WordPress 中制作的，出于某种原因，它使用 a-tag 而不是 button-tag 作为按钮。我宁愿不必更换标签。

我的背景：我相当精通 HTML 和 CSS 并且曾经对 PHP 没意见，但那是 10 年前的事了。 100% 自学成才。如果只有 PHP 的解决方案存在，即没有 Java 或类似的解决方案，我会更喜欢这样。我对此进行了广泛的搜索（2 小时以上），但找不到解决方案。

Answer 1

PHP 是一种服务器端语言，因此您无法在不重新呈现整个页面的情况下更改所选值，这并不理想。

您需要使用JavaScript。

您可以通过修改 'value' 属性来更改下拉列表的值。

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>

Answer 2

你可以试试这个：

<!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>

Select a-tag 按钮的下拉值

Select dropdown value by a-tag button

php

html

button

hyperlink

dropdown