在下拉菜单中更改基于所选值更新的按钮的下载链接

时间:2016-11-30 19:43:44

标签: javascript jquery html

我正在尝试在我的网站上创建一个按钮,允许您在单击时下载数据。此链接应根据我所拥有的4个下拉菜单中的选定值进行更新。问题是我的代码不起作用。以下是代码:

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

     function set_st(t) {
        var sel_el = t.options[t.selectedIndex]
        document.getElementById('down').src = 'http://watermonitor.gov/naww/index.php?st=' + sel_el.value
    }


</script>
<header>
   <div id='map_container' style="margin-top: 100px; border: 0px solid red; text-align: center;">
     <div id="xbuilder">
       <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=''>States</option>
                     </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>
            <div style="float: right; box-sizing: border-box;">
                <form action="http://waterwatch.usgs.gov/download/?gt=map&ofmt=kmr&x=0&st="  id="down">
                <input type="submit" value="Go to Google" / </form>
            </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=''>Provinces</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>
      </div>
     </center>
    </div>
  </header>
  <body>
   <div class="center">
    <div id="my-div">
     <iframe src="http://watermonitor.gov/naww/index.php" id="my-iframe"></iframe>
    </div>
   </div>
   <div class="legend">
    <img name="legend" style="border: 0px" src="http://waterwatch.usgs.gov/new/images/map_legends/ptile_dot.gif" alt="map legend">
   </div>
  </body>
</html>

我的问题是关于id为“down”的按钮,我尝试在javascript中解决它的方法就在上面。

1 个答案:

答案 0 :(得分:0)

试试这个:

获取选定的值

$( "#usst" ).val();

并设置srcattribüte

$( “#向下”)ATTR( “SRC”,URL);