如何使用下拉选择进行自动选择

Question

我有2个下拉选择，我要使第二个选择在部门选择时会自动选择。 我试图找到可以解决的javascript，但仍然找不到。

<select name="department" class="form-control" required>                                             
 <option disabled selected value> -- Select an Department -- </option>
 <option value="INFORMATION TECHNOLOGY">INFORMATION TECHNOLOGY</option>
 <option value="BUSINESS LIAISON">BUSINESS LIAISON</option>
 <option value="FINANCE & ACCOUNT">FINANCE & ACCOUNT </option>
 <option value="CEO OFFICE">CEO OFFICE</option>
 <option value="FACILITIES MANAGEMENT">FACILITIES MANAGEMENT</option>
</select>



  <select name="part" class="form-control" required>
  <option disabled selected value> -- Select Part -- </option>                                         
  <option value="HICOM1">HICOM1</option>
  <option value="HICOM2">HICOM2</option>
  <option value="HICOM3">HICOM3</option>
  </select>

Answer 1

我们可以通过将更改事件处理程序附加到第一个选择框来做到这一点：

 var department = document.querySelector('#department'); var part = document.querySelector('#part'); department.addEventListener('change', function() { var value = department.value; switch(value) { // assign a value to `part` depending on what option we have selected: case 'INFORMATION TECHNOLOGY': part.value = 'HICOM1'; break; case 'BUSINESS LIAISON': part.value = 'HICOM2'; break; case 'FINANCE & ACCOUNT': part.value = 'HICOM3'; break; default: part.value = ''; } }) 

 <select id="department"> <option disabled selected value> -- Select an Department -- </option> <option value="INFORMATION TECHNOLOGY">INFORMATION TECHNOLOGY</option> <option value="BUSINESS LIAISON">BUSINESS LIAISON</option> <option value="FINANCE & ACCOUNT">FINANCE & ACCOUNT </option> <option value="CEO OFFICE">CEO OFFICE</option> <option value="FACILITIES MANAGEMENT">FACILITIES MANAGEMENT</option> </select> <select id="part"> <option disabled selected value> -- Select Part -- </option> <option value="HICOM1">HICOM1</option> <option value="HICOM2">HICOM2</option> <option value="HICOM3">HICOM3</option> </select> 

Answer 2

将事件侦听器附加到第一个选择的onchange事件。

<select name="department" ... onchange="myFunction()">
   ...
</select>

<script>
  function myFunction() {
    alert(this.selectedIndex);
  }
</script>

或者，或者：

<select name="department" ...>
   ...
</select>

<script>
   document.getElementsByName("department")[0].addEventListener('change', function () {
      alert(this.selectedIndex);
   });
</script>

从那里，您可以使用selectedIndex来确定要对第二个下拉列表执行的操作。

Answer 3

如果要第二个下拉列表，请根据第一个下拉列表自动选择。

<select name="department" class="form-control" required>                                             
 <option disabled selected value> -- Select an Department -- </option>
 <option value="INFORMATION TECHNOLOGY" rel = "item1">INFORMATION TECHNOLOGY</option>
 <option value="BUSINESS LIAISON" rel = "item2">BUSINESS LIAISON</option>
</select>

<select name="part" class="form-control" required>
  <option disabled selected value> -- Select Part -- </option>                                         
  <option value="HICOM1" class ="item1">HICOM1</option>
  <option value="HICOM2" class ="item2">HICOM2</option>
</select>


********* Jquery code ********/
$('select[name=department]').on('change',function(){
        var set = $('select[name=part]').find('option.'
                  $(this).find(':selected').attr('rel'));
        /**** check set size is grater than 0 or not
        ****/
        if(set.size()<0) $('select[name=part]').hide(); return;
        /**other wise show item selected option**/
         $('select[name=part]').show();
         $('select[name=department]').
                   show().
                    first().
                     prop('selected', true);
});