2016-12-02 17 views
1

私は4 <select>私のウェブサイトのiframeと対話する対応する値を持つドロップダウンメニューを持っています。問題は、一度に1つのドロップダウンを選択できるようにし、他のドロップダウンメニューをWebサイトが最初に開いたときに元の値に戻すことだけです。解決策を研究した後、私はオンラインを見つけることができませんでした。以下では、ドロップダウンメニューのコードを示します。複数ドロップダウンメニューは一度に1つしか選択できません

<script> 
    var gST = "" 

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

    function down_ch() { 
     var link = "http://waterwatch.usgs.gov/download/?gt=map&st="+gST+"&ofmt=kmr&x=0"; 
     window.open(link) 
    } 

    function setURL(url){ 
    document.getElementById('my-iframe').src = url; 
    } 

    </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='javascript:set_st(this);' > 
         <option value=''>States</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='javascript: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> 
        <button class="button" onClick="javascript:down_ch();"><span class="icon">Download Data</span></button> 
       </td> 
      </tr> 
      <tr> 
       <td> 
       <div> 
        Canada: 
        <span data-tooltip='Choose a Canadian province'> 
        <select name='nus' id='nus' size='1' onchange='javascript: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 value="Reset Map" type="button" onclick="setURL('http://watermonitor.gov/naww/index.php')"/></div> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </header> 
+3

http://stackoverflow.com/help/how-to-ask問題を解決するためのあなたの努力を実証していません。 –

答えて

0

おそらくイベントでこれを達成できます。例えば。最初のドロップダウン・リストが開かれたときに、その後、無効に他人のすべてを設定します。 http://html.com/attributes/select-disabled/

あなたはこのようなjQueryを使っていることを行うことができ: http://api.jquery.com/category/events/:これをチェック、イベントの場合

$(ele).attr(disabled, disabled); 

$(ele).val('0'); 
:イベントはあなたが元の値の例にリストダウン、他のドロップを設定する必要があります発射したら

は、変更イベントを探します

ページが読み込まれたときに何が起こるべきか、そしてページ上のドロップダウンリストを開いたときに何が起こるべきかで質問を更新することができます。

+0

私はクリックしたときに値を使用するjavascriptを含めます –

関連する問題