Question

我有以下选择框。

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

当我选择首席执行官作为董事会时，它应该只显示部门名单中的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').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。这是一个有效的解决方案

$('#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>

编辑

我注意到jquery的hide/show与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>

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

2 个答案: