通过 a 标签按钮选择下拉值

发布于 2025-01-10 18:15:12 字数 1026 浏览 0 评论 0原文

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

我的选择：

<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 个大按钮并想要单击他的选择，这将更改表单并推动用户填写表单的其余部分并发送它。

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

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千と千尋 2025-01-17 18:15:12

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>

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>

回复收藏 0 原文

审判长 2025-01-17 18:15:12

你可以试试这个：

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

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>

回复收藏 0 原文

~没有更多了~