使用HTML下拉菜单更改链接

时间:2014-08-04 19:26:46

标签: javascript html iframe drop-down-menu

我正在尝试使用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等于下拉列表中选择的任何内容。

这可能吗?

2 个答案:

答案 0 :(得分:0)

$('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;
}

答案 1 :(得分:0)

您可以使用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