javascript - JS输出选项选择值作为链接中的获取参数

Question

我有一个下拉列表...

<select name="selection">
    <option value="apple">apple</option>
    <option value="orange">orange</option>
    <option value="banana">banana</option>
</select>

...该下拉列表下方是一个链接，可在 Fancybox 中打开 iframe。

<a href="iframe_content.php?selection={selection of dropdown list}" data-fancybox data-options='{"type" : "iframe", "iframe" : {"preload" : true, "css" : {"width" : "500px", "height" : "400px", "overflow" : "hidden"}}}'>
    Click
</a>

正如您所看到的，该链接有一个 GET 参数 (selection=...)，它应该动态地将下拉列表中当前选择的任何内容设置为参数值，而无需重新加载页面。

我知道如何在具有类或 id 的 div 或 span 内打印下拉值。但我不知道如何作为链接的一部分(即属性值)来做到这一点。

非常感谢。

Answer 1

如果您可以在 div 中打印下拉值，那就太好了。现在您可以获取下拉列表的值并直接发送ajax。只需添加

id='anchor'

在标签中，

id="dropdown" onclick='getSelectedValue()'

在选择标签上添加以下脚本

function getSelectedValue() {
var e = document.getElementById("dropdown");
option= e.options[e.selectedIndex].value;
document.getElementById("anchor").href="iframe_content.php?selection="+option;
return true;

}