我有這個清單
<select name="method" required class="form-control">
<option value="1">Cash</option>
<option value="2">Credit</option>
</select>
<select name="method2" class="form-control">
<?php
while (...) {
echo '<option value="id">Title</option>';
}
?>
</select>如果用戶從第一個“選擇方法”中選擇現金選項，
第二個“選擇方法2”必須禁用，如果他選擇信用，它必須被激活
我怎么做？
提前致謝
uj5u.com熱心網友回復：
以最簡單的形式，您可以將事件偵聽器添加到第一個偵聽更改事件的選擇框：
let selectOne = document.querySelector("#select-1"), selectTwo = document.querySelector("#select-2");
selectOne.addEventListener("change", () => {
if (selectOne.value == 1) {
selectTwo.disabled = true;
} else {
selectTwo.disabled = false;
}
})<select name="method" required class="form-control" id="select-1">
<option value="-">-</option>
<option value="1">Cash</option>
<option value="2">Credit</option>
</select>
<select name="method2" class="form-control" id="select-2">
<option value="-">-</option>
<option value="1">Just For Demo Purposes</option>
</select>uj5u.com熱心網友回復：
首先，您可以使用change事件監聽 select 中的任何更改
selectHTML 中的元素有一個disabled屬性，默認設定為 false 除非明確禁用，您可以將此屬性設定為 True 或 False 分別啟用或禁用選擇
const sel = document.getElementById('selectm');
const sel2 = document.getElementById('selectm2');
handler = () => {
console.log(sel.value)
if (sel.value == 1) sel2.disabled = true
else sel2.disabled = false;
}
sel.addEventListener('change', handler)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select name="method" required class="form-control" id="selectm">
<option value="0">Default</option>
<option value="1">Cash</option>
<option value="2">Credit</option>
</select>
<select name="method2" class="form-control" id="selectm2">
<option value="1">test</option>
<option value="2">test-1</option>
</select>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324893.html
標籤：javascript html
上一篇：創建多語言單頁網站的最簡單方法
下一篇：自動關閉HTML頁面