从下拉菜单中向 iframe src url 添加值

Question

我正在寻找一种方法来更改 iframe src 中的 url，方法是将 4 下拉菜单中的值添加到 iframe 外部。我的下拉菜单的代码如下。

<script>
  function set_st(e) {
    var val = e.options[e.selectedIndex].value;
    console.log(val);
  }
</script>
<table>
  <tbody>
    <tr>
      <td>
        <div>United States: <span data-tooltip='Choose a US state'><select name='usst' id='usst' size='1' onchange='set_st(this)' >
    <option value=''></option><option value='al'>Alabama</option><option value='ak'>Alaska</option><option value='az'>Arizona</option><option value='ar'>Arkansas</option><option value='ca'>California</option><option value='co'>Colorado</option><option value='ct'>Connecticut</option><option value='de'>Delaware</option><option value='dc'>District of Columbia</option><option value='fl'>Florida</option><option value='ga'>Georgia</option><option value='hi'>Hawaii</option><option value='id'>Idaho</option><option value='il'>Illinois</option><option value='in'>Indiana</option><option value='ia'>Iowa</option><option value='ks'>Kansas</option><option value='ky'>Kentucky</option><option value='la'>Louisiana</option><option value='me'>Maine</option><option value='md'>Maryland</option><option value='ma'>Massachusetts</option><option value='mi'>Michigan</option><option value='mn'>Minnesota</option><option value='ms'>Mississippi</option><option value='mo'>Missouri</option><option value='mt'>Montana</option><option value='ne'>Nebraska</option><option value='nv'>Nevada</option><option value='nh'>New Hampshire</option><option value='nj'>New Jersey</option><option value='nm'>New Mexico</option><option value='ny'>New York</option><option value='nc'>North Carolina</option><option value='nd'>North Dakota</option><option value='oh'>Ohio</option><option value='ok'>Oklahoma</option><option value='or'>Oregon</option><option value='pa'>Pennsylvania</option><option value='ri'>Rhode Island</option><option value='sc'>South Carolina</option><option value='sd'>South Dakota</option><option value='tn'>Tennessee</option><option value='tx'>Texas</option><option value='ut'>Utah</option><option value='vt'>Vermont</option><option value='va'>Virginia</option><option value='wa'>Washington</option><option value='wv'>West Virginia</option><option value='wi'>Wisconsin</option><option value='wy'>Wyoming</option><option value='pr'>Puerto Rico</option></select>
    </span><span data-tooltip='Choose a US water resource region'><select name='ushuc' id='ushuc' size='1' onchange='set_st(this);' >
    <option value=''>Water Res. Region</option><option value='01'>01 New England</option><option value='02'>02 Mid Atlantic</option><option value='03'>03 South Atlantic-Gulf</option><option value='04'>04 Great Lakes</option><option value='05'>05 Ohio</option><option value='06'>06 Tennessee</option><option value='07'>07 Upper Mississippi</option><option value='08'>08 Lower Mississippi</option><option value='09'>09 Souris-Red-Rainy</option><option value='10'>10 Missouri</option><option value='11'>11 Arkansas-White-Red</option><option value='12'>12 Texas-Gulf</option><option value='13'>13 Rio Grande</option><option value='14'>14 Upper Colorado</option><option value='15'>15 Lower Colorado</option><option value='16'>16 Great Basin</option><option value='17'>17 Pacific Northwest</option><option value='18'>18 California</option><option value='19'>19 Alaska</option><option value='20'>20 Hawaii</option><option value='21'>21 Puerto Rico</option></select>
    </span>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>Canada:<span data-tooltip='Choose a Canadian province'><select name='nus' id='nus' size='1' onchange='set_st(this);' >
    <option value=''></option><option value='zab'>Alberta</option><option value='zbc'>British Columbia</option><option value='zmb'>Manitoba</option><option value='znb'>New Brunswick</option><option value='znl'>Newfoundland and Labrador</option><option value='zns'>Nova Scotia</option><option value='znt'>Northwest Territories</option><option value='znu'>Nunavut</option><option value='zon'>Ontario</option><option value='zpe'>Prince Edward Island</option><option value='zqc'>Quebec</option><option value='zsk'>Saskatchewan</option><option value='zyt'>Yukon</option></select>
    </span><span data-tooltip='Choose a Canadian river basin'><select name='nhuc' id='nhuc' size='1' onchange='set_st(this);' >
    <option value=''>Canadian River Basins</option><option value='z01'>01 Maritime Provinces Drainage</option><option value='z02'>02 St.Lawrence River Drainage</option><option value='z03'>03 Northern Quebec Drainage</option><option value='z04'>04 Southwest Hudson Bay Drainage</option><option value='z05'>05 Nelson River Drainage</option><option value='z06'>06 Western Hudson Bay Drainage</option><option value='z07'>07 Great Slave Lake Drainage</option><option value='z08'>08 Pacific Drainage</option><option value='z09'>09 Yukon River Drainage</option><option value='z10'>10 Arctic Drainage</option><option value='z11'>11 Mississippi River Drainage</option></select>
    </span>
        </div>
        <div style='margin-left: 10px; float: right;' data-tooltip="Click to view a map of specified region.">
          <input name="go" value="Go" type="submit" />
        </div>
      </td>
    </tr>
  </tbody>
</table>

<iframe src="http://watermonitor.gov/naww/index.php" id="my-iframe">

我想做的是通过将我的下拉菜单之一中的值添加到 url 来更改 url http://watermonitor.gov/naww/index.php。例如

http://watermonitor.gov/naww/index.php?st=al

Answer 1

应该这样做，或者让你开始：

function set_st(t)
{
    var sel_el = t.options[t.selectedIndex]
    document.getElementById('my-iframe').src = '/naww/index.php?st=' + sel_el.value
}