如何在使用JavaScript或jQuery選擇父選項時進行選擇必需的選擇

Question

我試圖只在從類別選擇中選擇PDF選項時才需要子類別。

我已經嘗試過此JavaScript，但無法正常工作。

 function getVal(ele){ var element = document.getElementById("category") ele.value == "pdf" ? element.required =true : element.required =false } getVal(document.getElementById("subcat")) 

 <select id="category" name="category" required> <option value="">select category</option> <option>doc</option> <option value="pdf">pdf</option> <option>gifs</option> </select> <select id="subcat" name="subcat"> <option value="">select type</option> <option>normal pdf</option> <option>other pdf</option> </select> 

但是它不起作用，我在做什么錯？

Answer 1

使用jQuery：

 var $category = $("#category") var $subcat = $("#subcat") $category.on('change', function() { $subcat.prop('required', $(this).val() === "pdf") }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="category" name="category" required> <option value="">select category</option> <option>doc</option> <option value="pdf">pdf</option> <option>gifs</option> </select> <select id="subcat" name="subcat"> <option value="">select type</option> <option>normal pdf</option> <option>other pdf</option> </select> 

使用純JS：

var $category = document.querySelector("#category")
var $subcat = document.querySelector("#subcat")

$category.addEventListener('change', function() {
    $subcat.required = this.value === "pdf"
})

Answer 2

這在用戶從菜單中選擇某項之前運行。 將change事件偵聽器添加到選擇中即可。 另外，您正在混合ele和element 。

function getVal(ele) {
  ele.addEventListener('change', function() {
    var element = document.getElementById("category")
    element.value == "pdf" ? ele.required = true : ele.required = false
  })
}
getVal(document.getElementById("subcat"))