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

我们可以通过将更改事件处理程序附加到第一个选择框来执行此操作：

＆＃13;

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 = '';
  }
})

＆＃13;

<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>

＆＃13;

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

如果您想要第二个下拉菜单，请根据第一个需要参考自动选择。

swiperight.delegate

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

3 个答案: