ドロップダウンメニューからiframe src urlに値を追加

Question

iframeの外部にある4つのドロップダウンメニューから値を追加することで、iframeのsrcのurlを変更する方法を探しています。私のドロップダウンメニューのコードは以下の通りです。

<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へダウンメニュー私のドロップの1から値を追加することによって、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 
}