Javascript JS输出选项选择值作为链接中的get参数

我有一个下拉列表

<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中打印下拉值。但我不知道如何将其作为链接的一部分，即属性值

---

非常感谢。

如果您可以在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;

---

}

如果可以在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;

---

}

在您的锚上添加一个单击侦听器并自己更新href元素

document.getElementById("anchor").onclick = function() { 
document.getElementById("anchor").href="iframe_content.php?selection=" + document.getElementById('selection').value;
 return true;
 };

---

在锚点上添加一个单击侦听器并自己更新href元素

document.getElementById("anchor").onclick = function() { 
document.getElementById("anchor").href="iframe_content.php?selection=" + document.getElementById('selection').value;
 return true;
 };

---

很好。尽管您的解释没有提到将id=“dropdown”添加到select标记。并将“在按钮上”更改为“在选择标签上”。那我就同意你的回答。谢谢，很好用。尽管您的解释没有提到将id=“dropdown”添加到select标记。并将“在按钮上”更改为“在选择标签上”。那我就同意你的回答。谢谢