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?

This is possible, but have you tried to implement it yourself yet? Users on SO will be reluctant to answer questions without any demonstrated effort by the original poster. — Jason, Aug 04 '14 at 19:29

score 0 · Answer 1 · answered Aug 04 '14 at 19:34

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

answered Aug 04 '14 at 19:34

im_benton

2,541
4
21
30

You can also use the `.change()` event. – Jason Aug 04 '14 at 19:37

score 0 · Answer 2 · edited Aug 04 '14 at 19:51

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

Change Link with HTML Dropdown

2 Answers2

Linked