Change Link with HTML Dropdown

Question

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?

Answer 1

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

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