使用 HTML 下拉菜单更改链接答案

【问题标题】：Change Link with HTML Dropdown使用 HTML 下拉菜单更改链接
【发布时间】：2014-09-27 08:44:32
【问题描述】：

我正在尝试使用 HTML 下拉菜单中的值来更改 Google 电子表格查询 HTML 表的“位置”。

这是我目前拥有的下拉菜单：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

我需要它更改的链接如下所示（在 iframe 内）：

<iframe src="https://docs.google.com/spreadsheets/d/*spreadsheet key*/gviz/tq?tqx=out:html&tq=select+A,B,D,E,F,G+**where+D+contains+'*CHANGETHIS*'**&gid=2105149734" width="100%" height="200"></iframe>

基本上我需要CHANGETHIS 等于下拉列表中选择的任何内容。

这可能吗？

【问题讨论】：

可能，但显示您尝试的任何内容。
这是可能的，但是您尝试过自己实现吗？ SO 上的用户将不愿意在没有原始发帖人做出任何努力的情况下回答问题。

标签： javascript html iframe drop-down-menu

【解决方案1】：

您可以使用 javascript 来执行此操作。首先，您需要将 id 添加到选择中

所以把你的清单改成

<select id="myID">             <====== heres the change
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
var value = document.getElementById("myID");
var selectedString = value.options[value.selectedIndex].value;

这里selectedString 包含要添加到 IFrame 中的字符串的值。

var Url="https://docs.google.com/spreadsheets/d/*spreadsheet key*/gviz/tq?tqx=out:html&tq=select+A,B,D,E,F,G+**where+D+contains+selectedString+&gid=2105149734"

或使用innerHTML

【讨论】：

【解决方案2】：

$('option').click(function(e){
  var $item = $(e.currentTarget).attr('value');
  updateIframe($('iframe'), $item);
});

function loadIframe(iframeName, url) {
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

【讨论】：

你也可以使用.change()事件。