javascript - 如何根据前一个下拉值的选择启用/禁用第二个下拉列表值

Question

我们有 2 个下拉菜单。选择第一个下拉列表时，与其相关的值将显示为启用或突出显示，其余其他选项应在第二个下拉列表中禁用。这两个下拉列表都是多选的并且是对象数组。

我可以在第二个下拉列表中附加条件值，但其他选项正在隐藏。我希望所有选项都可见，并且应启用/突出显示所选的一个选项。

var 第一个值 = [

{ id: 1, value: 'foo1' },
{ id: 2, value: 'foo2' },
{ id: 3, value: 'foo3' },

]var 第二个值 = [

{ id: 1, value: 'foo11' },
{ id: 2, value: 'foo21' },
{ id: 2, value: 'foo22' },
{ id: 3, value: 'foo31' },
{ id: 3, value: 'foo32' },  

]

$('#rewardType').change(function (){
var firstSelcted = $(this).val();if (firstSelcted && firstSelcted.length > 0) {
        for (var j = 0; j < firstSelcted.length; j++) {                
            var filtered = secondVal.filter( function(myArr){
                 return myArr.id == firstSelcted[j];
        });for (var k = 0; k < filtered.length; k++) {
            $('#rewardTypes').append('<option value="' + filtered[k].value + '">' + filtered[k].value + '</option>');                   
            }
            $('this').css('background-color','red');
            $('#rewardTypes').selectpicker('refresh');
        }

如果我在第一个下拉列表中选择 foo2，那么在第二个下拉列表中它应该突出显示或启用 foo21、foo22。其余的应该被禁用。

Answer 1

您可以尝试以下方法，您可以使用 json 数组填充列表，并且在第一个列表的更改事件上您可以启用或禁用第二个列表选项

$(document).ready(function(){
var firstVal = [
{ id: 1, value: 'foo1' },
{ id: 2, value: 'foo2' },
{ id: 3, value: 'foo3' },
] ;
var secondVal = [
{ id: 1, value: 'foo11' },
{ id: 2, value: 'foo21' },
{ id: 2, value: 'foo22' },
{ id: 3, value: 'foo31' },
{ id: 3, value: 'foo32' },  
]
var $firstList = $('#rewardType');
var $secondList = $('#rewardTypes');
$.each(firstVal, function(key,val){
  $firstList.append('<option value="' + val.id + '">' + val.value + '</option>');
});
$.each(secondVal, function(key,val){
  $secondList.append('<option disabled value="' + val.id + '">' + val.value + '</option>');
});
$firstList.change(function(){
   var value = $(this).val();
   //console.log(value);
   $secondList.val("");
   $secondList.find('option').each(function(){
      var optVal = $(this).attr('value');
      //console.log("option " + optVal);
      if(value.indexOf(optVal)>=0) {
         $(this).removeAttr('disabled');
      } else {
         $(this).attr('disabled',true);
      }
   });
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<select id="rewardType" multiple="true"><option value=""></option></select>
<select id="rewardTypes" multiple="true"><option value=""></option></select>