我實際上制作了自己的電話輸入菜單，我的代碼結構如下所示：<select id-"select_code"> <option data-countryCode="IN" value="91">India</option> <option data-countryCode="US" value="1">US</option> <option data-countryCode="GB" value="44">UK</option></select>如何通過選擇文本/值并通過小寫的實際數據國家/地區<Select> tag代碼 更改圖像 url 來修改下一節中的圖像源{data-countryCode}<div class="image"> <img id="flag_img" src="https://flagpedia.net/data/flags/h80/{data-countryCode}.webp" id="img-change"></div> <script> var select = document.getElementById("select_code") select.addEventListner("click", function changeImage(){ document.getElementById("flag-img").src = `https://flagpedia.net/data/flags/h80/ + {what to do here?} + .webp`} </script>
4 回答
慕容3067478
TA貢獻1773條經驗 獲得超3個贊
您可以將更改事件處理程序綁定到選擇標記并src根據更改進行更改。
const img = document.querySelector('#img-change');
const select = document.querySelector('#country');
select.addEventListener('change', function() {
img.src = `https://flagpedia.net/data/flags/h80/${this.selectedOptions[0].dataset.countrycode.toLowerCase()}.webp`
})
<select id="country">
<option data-countryCode="IN" value="91">India</option>
<option data-countryCode="US" value="1">US</option>
<option data-countryCode="GB" value="44">UK</option>
</select>
<div class="image">
<img src="https://flagpedia.net/data/flags/h80/in.webp" id="img-change">
</div>
泛舟湖上清波郎朗
TA貢獻1818條經驗 獲得超3個贊
您可以使用 JavaScript 來完成此操作。
在更改時添加事件偵聽器到您的選擇，然后根據所選選項設置圖像的 src。
const selection = document.querySelector('#countryCodeSelection');
const image = document.querySelector('#img-change')
selection.onchange = (ev) => {
const index = selection.selectedIndex;
const countryCode = selection.options[index].dataset.countrycode.toLowerCase();
image.src = `https://flagpedia.net/data/flags/h80/${countryCode}.webp`
};
<select id="countryCodeSelection">
<option disabled selected value>select country</option>
<option data-countryCode="IN" value="91">India</option>
<option data-countryCode="US" value="1">US</option>
<option data-countryCode="GB" value="44">UK</option>
</select>
<div class="image">
<img id="img-change">
</div>
胡子哥哥
TA貢獻1825條經驗 獲得超6個贊
您需要將change事件添加到select. getFlag 將創建標志 url 并將其設置為src最初為空的圖像的 url。再次調用change此函數以從所選選項中getFlag獲取屬性。注意常量中data的使用template literalflagURL
function getFlag() {
const url = document.getElementById('phoneSelect').selectedOptions[0].dataset.countrycode;
const flagURL = `https://flagpedia.net/data/flags/h80/${url.toLowerCase()}.webp`
document.getElementById('img-change').setAttribute('src', flagURL)
}
document.getElementById('phoneSelect').addEventListener('change', function(evt) {
getFlag();
});
getFlag()
<select id='phoneSelect'>
<option data-countryCode="IN" value="91">India</option>
<option data-countryCode="US" value="1">US</option>
<option data-countryCode="GB" value="44">UK</option>
</select>
<div class="image">
<img src='' id="img-change">
</div>
夢里花落0921
TA貢獻1772條經驗 獲得超6個贊
你可以使用這個代碼
你的 HTML
<select id="chooseCountry">
<option data-countryCode="IN" value="91">India</option>
<option data-countryCode="US" value="1">US</option>
<option data-countryCode="GB" value="44">UK</option>
</select>
<div class="image" id="imageRelativeCountry">
<img src="https://flagpedia.net/data/flags/h80/in.webp" id="img-change">
</div>
js代碼
const chooseCountrySelect = document.getElementById("chooseCountry");
chooseCountrySelect.addEventListener("change",function (e) {
let language = e.target.options[e.target.selectedIndex].getAttribute("data-countryCode");
const imgElm = document.querySelector("#imageRelativeCountry img");
language = language.toLowerCase();
imgElm.setAttribute("src",`https://flagpedia.net/data/flags/h80/${language}.webp`);
});
- 4 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消