javascript - 如何在使用 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"
})