根据第一个 select 框选项更新第二个 select 框选项

Question

我有以下 select 个盒子。

<select id="directorate">
  <option value="1|CEO">CEO</option>
  <option value="2|Community">Community</option>
  <option value="3|Media">Media</option>
  <option value="4|Development">Development</option>
  <option value="5|Social">Social</option>
</select>

<select id="department">
  <option value="1">A</option>
  <option value="1">B</option>
  <option value="1">C</option>
  <option value="2">D</option>
  <option value="3">E</option>
  <option value="3">F</option>
  <option value="3">G</option>
</select>

当我select CEO 担任董事会时，它应该只显示部门列表中的A 和B。下面是我的示例 jquery 代码。由于某种原因，它不起作用，如果有人能指导我走正确的道路，那就太好了！

$('#directorate').change(function() {
var rawValue = $(this).val().split('|');
    $('#department option').each(function () {
        var NewValue = $(this).val().split('|');
        if (rawValue[0] !== newValue[0]) {
            $(this).remove();  
        }
    });
});

Answer 1

试试这个：您正在删除不需要的选项，因此当您更改 directorate 选项时，它在下一个 select 框中找不到所需的选项。相反，您可以显示/隐藏选项，请参见下面的代码

$('#directorate').change(function() {
var rawValue = $(this).val().split('|');
    //hide all options by default
    $('#department option').hide();
    $('#department').find('option[value="' + rawValue[0] + '"]').hide();
});

Answer 2

我在您的解决方案中发现了很多错误，其中之一是您在 if 语句中使用 newValue 但您声明 NewValue instead.Here 是一个有效的解决方案

$('#directorate').change(function() {
  $('#department').val( '' );
var rawValue = $(this).val().split('|');
    $('#department option').each(function () {
        var newValue = $(this).val();
        if (rawValue[0] != newValue[0] && rawValue[0] != "") {
            $(this).hide();  
        }
      else{$(this).show(); }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="directorate">
  <option value="">---</option>
  <option value="1|CEO">CEO</option>
  <option value="2|Community">Community</option>
  <option value="3|Media">Media</option>
  <option value="4|Development">Development</option>
  <option value="5|Social">Social</option>
</select>

<select id="department">
  <option value="">---</option>
  <option value="1">A</option>
  <option value="1">B</option>
  <option value="1">C</option>
  <option value="2">D</option>
  <option value="3">E</option>
  <option value="3">F</option>
  <option value="3">G</option>
</select>

编辑

I have noticed that jquery's hide/show doesn't really work well with IE.

这是一个替代方案

$( document ).ready(function() {
   var options = $('#department').children().clone();
  
    $('#directorate').change(function() {
      $('#department').children().remove();
    var rawValue = $(this).val().split('|');
     options.each(function () {
            var newValue = this.value;
            if (rawValue[0] == newValue[0] || rawValue[0] =="") {
                $('#department').append(this);
             }
        });
      $('#department').val('');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="directorate">
     <option value="">---</option>
      <option value="1|CEO">CEO</option>
      <option value="2|Community">Community</option>
      <option value="3|Media">Media</option>
      <option value="4|Development">Development</option>
      <option value="5|Social">Social</option>
</select>

<select id="department">
      <option value="">---</option>
      <option value="1">A</option>
      <option value="1">B</option>
      <option value="1">C</option>
      <option value="2">D</option>
      <option value="3">E</option>
      <option value="3">F</option>
      <option value="3">G</option>
</select>

根据第一个 select 框选项更新第二个 select 框选项

update second select box options based on the first select box options

jquery

html-select