更改选项后重新加载 div 以选择菜单

问题描述 投票:0回答:1

我粘贴下面的html代码,它按国家/地区加载天气状况,例如,如果用户选择纽约,则气象将在div“明天”上显示,但如果用户再次更改国家/地区,div将不会重新加载新的预设。我尝试了一些脚本,但我没有 js 技能,有人可以帮助我吗?

谢谢

完整的 html 项目下方

更改选择的国家/地区后,我需要重新加载div。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Weather</title>
<style>
 select {
    font-size: 17px;
    margin-top: 10px; 
    border-radius: 25px; 
    padding: 10px; 
    border: 0.5px solid #dedede; 
    width: 100%;
  }
  
  select {
    background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
    background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
    background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
    background-repeat: no-repeat;
  }
  
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
  }
</style>
</head>
<body bgcolor="#f9f9f9">
<script>
function changeSim() {
    const select = document.getElementById('select');
    $("#tomorrow").attr(
        "data-location-id",
        select.options[select.selectedIndex].value);
    load(document, 'script', 'tomorrow-sdk');
}

function load(d, s, id) {
    if (d.getElementById(id)) {
        if (window.__TOMORROW__) {
            window.__TOMORROW__.renderWidget();
        }
        return;
    }
    const fjs = d.getElementsByTagName(s)[0];
    const js = d.createElement(s);
    js.id = id;
    js.src = "https://www.tomorrow.io/v1/widget/sdk/sdk.bundle.min.js";
    fjs.parentNode.insertBefore(js, fjs);
};
</script>

<select id="select" onchange="changeSim()">
    <option value="">--Choose an option--</option>
    <option value="000011">Abu Dhabi</option>
    <option value="003919">Adelaide - Australia</option>
    <option value="038587">Addis Abeba - Ethiopia</option>
    <option value="031230">Algeri - Algeria</option>
    <option value="077340">Amsterdam - Netherlands</option>
    <option value="107166">Ankara - Turkey</option>
    <option value="107169">Antalia - Turkey</option>
    <option value="052515">Athens - Greece</option>
    <option value="080561">Arequipa - Peru</option>
    <option value="111590">Atlanta - Georgia</option>
    <option value="111591">Atlanta - Texas</option>
    <option value="111592">Atlanta - Illinois</option>
    <option value="134504">Baghdad - Iraq</option>
    <option value="080561">Bali - Indonesia</option>
    <option value="106448">Bankcog - Thailand</option>
    <option value="032653">Barcelona - Spain</option>
    <option value="111806">Bar Harbor - Maine - USA</option>
    <option value="019332">Beijin - China</option>
    <option value="065936">Beirut - Lebanon</option>
    <option value="097170">Belgrade - Serbia</option>
    <option value="024053">Berlin - Germany</option>
    <option value="017462">Bern - Switzerland</option>
    <option value="112589">Boston - Massachusset - USA</option>
    <option value="104374">Bratislava - Slovakia</option>
    <option value="004411">Brisbane - Australia</option>
    <option value="090347">Bucharest - Romania</option>
    <option value="055263">Budapest - Hungary</option>
    <option value="000704">Buenos Aires - Argentina</option>
    <option value="008693">Bruselles - Belgium</option>
    <option value="031802">Cairo - Egypt</option>
    <option value="016259">Calgary - Canada</option>
    <option value="004566">Canberra - Australia</option>
    <option value="131059">Cape Town - South Africa</option>
    <option value="021114">Cartagena de Indias - Colombia</option>
    <option value="113931">Chicago - Illinois - USA</option>
    <option value="143883">Colombia - Colombia</option>
    <option value="030620">Copenhagen - Denmark</option>
    <option value="080636">Cusco - Peru</option>
    <option value="104704">Dakar - Senegal</option>
    <option value="104988">Damascus - Syria</option>
    <option value="004947">Darwin - australia</option>
    <option value="115253">Denver - Colorado - USA</option>
    <option value="030565">Djibouti - Djibouti</option>
    <option value="000032">Dubai - United Arab Emirates</option>
    <option value="057223">Dublin - Ireland</option>
    <option value="131092">Durban - South Africa</option>
    <option value="138563">Florence - Italy</option>
    <option value="049441">Edinburgh - Germany</option>
    <option value="025211">Frankfurt - Germany</option>
    <option value="2180733">Fuerteventura - Canary Islands - Spain</option>
    <option value="130201">Hanoi - Vietnam</option>
    <option value="038770">Helsinki - Finland</option>
    <option value="130563">Hội An - Vietnam</option>
    <option value="118623">Honolulu - Hawaii - USA</option>
    <option value="034729">Ibiza - Spain</option>
    <option value="118924">Indianapolis - Indiana - USA</option>
    <option value="085475">Islamabad - Pakistan</option>
    <option value="107308">Istanbul - Turkey</option>
    <option value="056293">Jakarta - Indonesia</option>
    <option value="057484">Jerusalem - Israel</option>
    <option value="131136">Joahnnesburg - South Africa</option>
    <option value="000079">Kabul -Afghanistan</option>
    <option value="079735">Kathmandu - Nepal</option>
    <option value="109897">Kyiv - Ukraine</option>
    <option value="076497">Kuala Lumpur - Malaysia</option>
    <option value="2180737">Lanzarote - Canary Islands - Spain</option>
    <option value="034988">Las Palmas - Canary Islands - Spain</option>
    <option value="089245">Lisbon - Portugal</option>
    <option value="120626">Little Rock - Arkansas - USA</option>
    <option value="120163">Las Vegas - Nevada - USA</option>
    <option value="050388">London - UK</option>
    <option value="120784">Los Angeles - California - USA</option>
    <option value="104169">Ljubljana - Slovenia</option>
    <option value="066801">Luxembourg - Luxembourg</option>
    <option value="035186">Madrid - Spain</option>
    <option value="035703">Malaga - Spain</option>
    <option value="083524">Manila - Philippines</option>
    <option value="102864">Mecca - Saudi Arabia</option>
    <option value="021074">Medellin - Colombia</option>
    <option value="006235">Melbourne - Australia</option>
    <option value="140142">Milan - Italy</option>
    <option value="121951">Minneapolis - Minnesota - USA</option>
    <option value="015989">Minsk - Belarus</option>
    <option value="104810">Mogadishu - Somalia</option>
    <option value="044298">Montpelier - France</option>
    <option value="099972">Moskow - Russia</option>
    <option value="133024">Mumbai - India</option>
    <option value="027540">Munich - Germany</option>
    <option value="064845">Nairobi - Kenya</option>
    <option value="140713">Naples - Italy</option>
    <option value="022069">Nicosia - Cyprus</option>
    <option value="122795">New York City - New York - USA</option>
    <option value="133210">New Delhi - India</option>
    <option value="123404">Oklahoma City - USA</option>
    <option value="064214">Osaka - Japan</option>
    <option value="079425">Oslo - Norway</option>
    <option value="2180760">Palma de Mallorca - Spain</option>
    <option value="044856">Paris - France</option>
    <option value="106617">Pattaya - Thailand</option>
    <option value="067364">Podgorica - Montenegro</option>
    <option value="006840">Perth - Australia</option>
    <option value="022970">Prague - Czech Republic</option>
    <option value="2011883">Pristina - Kosovo</option>
    <option value="106650">Phuket - Thailand</option>
    <option value="065231">Pyongyang - North Korea</option>
    <option value="016867">Quebec - Canada</option>
    <option value="067193">Rabat - Morocco</option>
    <option value="135206">Reykjavik - Iceland</option>
    <option value="066948">Riga - Latvia</option>
    <option value="059385">Rimini - Italy</option>
    <option value="014309">Rio De Janeiro - Brazil</option>
    <option value="059582">Roma</option>
    <option value="125577">Sacramento - California - USA</option>
    <option value="125767">Salt Lake City - Utah - USA</option>
    <option value="104700">San Marino - San Marino</option>
    <option value="125809">San Francisco - California - USA</option>
    <option value="125894">Sanibel - Florida - USA</option>
    <option value="001458">Santa Fe - Argentina</option>
    <option value="2090771">Santorini - Greece</option>
    <option value="015101">São Paulo - Brazil</option>
    <option value="037036">Santa Cruz de Tenerife - Canary Island
    <option value="014404">Salvador - Brazil</option>
    <option value="008380">Sarajevo - Bosnia and Herzegovina</option>
    <option value="126104">Seattle - Whashington - USA</option>
    <option value="065498">Seoul - South Korea</option>
    <option value="104057">Singapore - Singapore</option>
    <option value="067526">Skopje - Macedonia</option>
    <option value="009701">Sofia - Bulgaria</option>
    <option value="126572">Solvang - California - USA</option>
    <option value="103758">Stockholm - Sweden</option>
    <option value="007408">Sydney - Australia</option>
    <option value="109031">Taipei - Taiwan</option>
    <option value="031716">Tallinn - Estonia</option>
    <option value="052126">Tbilisi</option>
    <option value="135129">Teheran - Iran</option>
    <option value="000271">Tirana - Albania</option>
    <option value="064500">Tokyo - Japan</option>
    <option value="067032">Tripoli - Lybia</option>
    <option value="107039">Tunisi - Tunisia</option>
    <option value="061575">Turin - Italy</option>
    <option value="067815">Valletta - Malta</option>
    <option value="061822">Venice - Italy</option>
    <option value="017156">Victoria - Canada</option>
    <option value="003681">Vienna - Austria</option>
    <option value="066703">Vilnius - Lithuania</option>
    <option value="088480">Warasw - Poland</option>
    <option value="079915">Wellington - New Zealand</option>
    <option value="055004">Zagreb -  Croatia</option>
</select>
<div style="height:15px;"></div>
<div id="tomorrow" class="tomorrow"
     data-location-id='$("#country_text").text(id)'
     data-language="EN"
     data-unit-system="METRIC"
     data-skin="light"
     data-widget-type="upcoming"
     style="padding-bottom:22px;position:relative;"
     >
    <a
       href="https://www.tomorrow.io/weather-api/"
       rel="nofollow noopener noreferrer"
       target="_blank"
       style="position: absolute; bottom: 0; transform: translateX(-50%); left: 50%;"
       >
        <img
             alt="Powered by the Tomorrow.io Weather API"
             src="https://weather-website-client.tomorrow.io/img/powered-by.svg"
             width="250"
             height="18"
             />
    </a>
</div>
</body>
</html>

javascript
1个回答
0
投票

在小部件渲染后检查 DOM,显示

#tomorrow
元素已添加
data-rendered="true"
- 以防止脚本再次解析已渲染小部件的元素。

所以你不仅需要设置新的位置ID,还需要删除该属性,或者将其设置为false。

function changeSim() {
    const select = document.getElementById('select');
    $("#tomorrow").attr(
        "data-location-id",
        select.options[select.selectedIndex].value);
    $("#tomorrow").attr('data-rendered', 'false'); // <- set rendered state to false
    load(document, 'script', 'tomorrow-sdk');
}
© www.soinside.com 2019 - 2024. All rights reserved.