我想通過這種方式下拉串列更改影像大小或 HTML 頁面中的任何值。
這是我的代碼:
<html>
<head>
</head>
<body>
<select id="selectbox" name="">
<option value="empty"></option>
<option value="firstSize">1</option>
<option value="SecondSize">2</option>
</select>
<br><br>
<img src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432">
</div>
</body>
</html>
如果從選擇框中選擇 1 我想將 src 上方的影像大小更改為"https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200"
uj5u.com熱心網友回復:
這將起作用,您可以根據需要更改按鈕的文本
function check(){
var val = document.getElementById("selectbox").value
var pic = document.getElementById("img")
if(val==="firstSize"){
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
}
}
<html>
<head>
</head>
<body>
<select id="selectbox" name="">
<option value="empty"></option>
<option value="firstSize">1</option>
<option value="SecondSize">2</option>
</select>
<button onclick="check()">Check</button>
<br><br>
<img src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432" id="img">
</div>
</body>
</html>
或者你可以做
function check(){
var val = document.getElementById("selectbox").value
var pic = document.getElementById("img")
if(val==="firstSize"){
pic.setAttribute('src','https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=400,200')
}
}
<html>
<head>
</head>
<body>
<select onchange="check()" id="selectbox" name="">
<option hidden value="empty"></option>
<option value="firstSize">1</option>
<option value="SecondSize">2</option>
</select>
<br><br>
<img src="https://www.ask.com/wp-content/uploads/sites/3/2022/02/PowerOfDogPromo.jpeg?resize=768,432" id="img">
</div>
</body>
</html>
片段 1 和 2 的不同之處在于編號 2 沒有按鈕,當您單擊選項時它會更改并且您無法選擇空值
您可以使用隱藏按鈕和無按鈕組合 1 和 2,但如果它中斷,請在此問題/帖子中發布
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/428640.html
標籤:javascript php html jQuery
