2016-11-30 3 views
0

クリックしたときにデータをダウンロードできるボタンをWebサイトで作成しようとしています。このリンクは、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が「ダウン」とボタンについてですとJavaScriptでそれを解決する方法の私の試みは、上記あります。

+2

多くのタグが不完全で、オープンでクローズされておらず、 '>'もなく、ヘッダーはボディの内側になければならず、同じ名前の複数の関数を宣言したり、プロトタイプのコンストラクタを使用したり、名。最初に修正する – Thielicious

答えて

0

これを試してみてください:。

は、選択した値

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

と設定src属性

$( "#ダウン")を取得するのattr( "SRC" は、url);

関連する問題