我實(shí)際上制作了自己的電話輸入菜單，我的代碼結(jié)構(gòu)如下所示：<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>如何通過選擇文本/值并通過小寫的實(shí)際數(shù)據(jù)國家/地區(qū)<Select> tag代碼 更改圖像 url 來修改下一節(jié)中的圖像源{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貢獻(xiàn)1773條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以將更改事件處理程序綁定到選擇標(biāo)記并src根據(jù)更改進(jìn)行更改。
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貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以使用 JavaScript 來完成此操作。
在更改時(shí)添加事件偵聽器到您的選擇，然后根據(jù)所選選項(xiàng)設(shè)置圖像的 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貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊
您需要將change事件添加到select. getFlag 將創(chuàng)建標(biāo)志 url 并將其設(shè)置為src最初為空的圖像的 url。再次調(diào)用change此函數(shù)以從所選選項(xiàng)中g(shù)etFlag獲取屬性。注意常量中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>
夢(mèng)里花落0921
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊
你可以使用這個(gè)代碼
你的 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 關(guān)注
- 187 瀏覽
添加回答
舉報(bào)
0/150
提交
取消