用HTML下拉菜单更改链接

Change Link with HTML Dropdown

本文关键字：链接 下拉菜单 HTML      更新时间：2023-09-26

我试图使用从HTML下拉菜单的值来改变谷歌电子表格查询HTML表的"where"。

这是我目前的下拉菜单:

<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等于下拉框中选择的任何内容。

这可能吗?

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

您可以使用javascript完成此操作。首先，您需要为select

添加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

相关文章：