Change Link with HTML Dropdown

问题

I'm trying to use the values from an HTML dropdown menu to change the "where" of the Google Spreadsheet query HTML table.

Here's the dropdown as I have it so far:

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

And the link I need it to change looks like this (inside of an 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>

Basically I need CHANGETHIS to equal whatever is selected in the dropdown.

Is this possible?

回答1:

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

回答2:

You can do this using javascript. First you need to add id to the select

So change your list to

<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;

here selectedString contains the value to be added to the string in 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"

or use innerHTML

来源：https://stackoverflow.com/questions/25126091/change-link-with-html-dropdown

标签

javascript

html

iframe

drop-down-menu