选中JQuery Bootstrap selectpicker on（'change'）设置(JQuery Bootstrap selectpicker on('change') set selected)

 我正在尝试禁用并默认 - 根据另一个选择的值选择<select> 。 当我第一次在<select> choixVarX中选择一个选项（例如“Pop”）时， <select> parametresX正是我想要它做的：禁用前两个<optgroup>和默认选择“pasCentre”和“noDispersion”。 但是，当我将choixVarX更改为另一个不触发我想要的行为（例如“PropRetraite”）然后再将其更改为触发我想要的行为（例如“FoyersImposes”或“FoyersFiscaux”）时，第二个<select> parametresX表现<optgroup>奇怪：两个第一个<optgroup>被禁用，但“pasCentre”和“noDispersion”不是默认选择...任何线索？ 
 
<select class="selectpicker" name="choixVarX" id="choixVarX" size="1" onChange="populateMap('#DDDDC2','#000000',listeComparaison);">
        <option value="Pop">Population</option>
        <option value="FoyersImposes">Nombre de foyers imposés</option>
        <option value="FoyersFiscaux">Nombre de foyers fiscaux</option>
        <option value="PropRetraite">Part des retraites dans les revenus</option>
        <option value="PropFoyersImposes">Proportion de foyers imposés</option>
        <option value="RevMoyen">Revenu moyen</option>
      </optgroup>
    </select>
    <select class="selectpicker" multiple name="parametresX[]" id="parametresX" size="1" data-width="150px" onChange="populateMap('#DDDDC2','#000000',listeComparaison);" data-max-options="3">
      <optgroup label="Centrage des données" data-max-options="1" id="centrageX">
        <option value="median">Médiane des communes</option>
        <option value="moyenne">Moyenne des communes</option>
        <option value="pasCentre">Ne pas centrer</option>
      </optgroup>
      <optgroup label="Dispersion" id="dispersionX" data-max-options="1">
        <option value="minmax">Min-Max</option>
        <option value="ecarttype">Ecart-type</option>
        <option value="noDispersion">Aucun</option>
      </optgroup>
      <optgroup label="Echelle" id="echelleX" data-max-options="1">
        <option value="echelleComplete">Echelle étendue</option>
        <option value="echelleAdaptee">Echelle réduite</option>
      </optgroup>
    </select>

$('#choixVarX').on('change',function(){
  if($('#choixVarX').val()=="FoyersImposes" || $('#choixVarX').val()=="FoyersFiscaux" || $('#choixVarX').val()=="Pop"){
    $('.selectpicker').selectpicker('refresh');
    $('#centrageX option[value="median"]').attr('selected',false);
    $('#centrageX option[value="moyenne"]').attr('selected',false);    
    $('#centrageX option[value="pasCentre"]').attr('selected',true);
    $('#dispersionX option[value="minmax"]').attr('selected',false);
    $('#dispersionX option[value="ecarttype"]').attr('selected',false);
    $('#dispersionX option[value="noDispersion"]').attr('selected',true);
    $('#centrageX').attr('disabled',true);
    $('#dispersionX').attr('disabled',true);
    $('.selectpicker').selectpicker('refresh');
  }else{
    $('#centrageX').attr('disabled',false);
    $('#dispersionX').attr('disabled',false);
    $('.selectpicker').selectpicker('refresh');
  }
});

I'm trying to disable and default-select a <select> based on the value on another select. When I first select one option in <select> choixVarX (e.g. "Pop"), <select> parametresX does exactly what I want it to do: disable the first two <optgroup> and default-select "pasCentre" and "noDispersion". However, when I change choixVarX to another one not triggering the behavior I want (e.g. "PropRetraite") and then change it again to one triggering the behavior I want (e.g. "FoyersImposes" or "FoyersFiscaux"), the second <select> parametresX behaves weirdly: the two first <optgroup> are disabled, but "pasCentre" and "noDispersion" are NOT default-selected... Any clue?
 
<select class="selectpicker" name="choixVarX" id="choixVarX" size="1" onChange="populateMap('#DDDDC2','#000000',listeComparaison);">
        <option value="Pop">Population</option>
        <option value="FoyersImposes">Nombre de foyers imposés</option>
        <option value="FoyersFiscaux">Nombre de foyers fiscaux</option>
        <option value="PropRetraite">Part des retraites dans les revenus</option>
        <option value="PropFoyersImposes">Proportion de foyers imposés</option>
        <option value="RevMoyen">Revenu moyen</option>
      </optgroup>
    </select>
    <select class="selectpicker" multiple name="parametresX[]" id="parametresX" size="1" data-width="150px" onChange="populateMap('#DDDDC2','#000000',listeComparaison);" data-max-options="3">
      <optgroup label="Centrage des données" data-max-options="1" id="centrageX">
        <option value="median">Médiane des communes</option>
        <option value="moyenne">Moyenne des communes</option>
        <option value="pasCentre">Ne pas centrer</option>
      </optgroup>
      <optgroup label="Dispersion" id="dispersionX" data-max-options="1">
        <option value="minmax">Min-Max</option>
        <option value="ecarttype">Ecart-type</option>
        <option value="noDispersion">Aucun</option>
      </optgroup>
      <optgroup label="Echelle" id="echelleX" data-max-options="1">
        <option value="echelleComplete">Echelle étendue</option>
        <option value="echelleAdaptee">Echelle réduite</option>
      </optgroup>
    </select>

$('#choixVarX').on('change',function(){
  if($('#choixVarX').val()=="FoyersImposes" || $('#choixVarX').val()=="FoyersFiscaux" || $('#choixVarX').val()=="Pop"){
    $('.selectpicker').selectpicker('refresh');
    $('#centrageX option[value="median"]').attr('selected',false);
    $('#centrageX option[value="moyenne"]').attr('selected',false);    
    $('#centrageX option[value="pasCentre"]').attr('selected',true);
    $('#dispersionX option[value="minmax"]').attr('selected',false);
    $('#dispersionX option[value="ecarttype"]').attr('selected',false);
    $('#dispersionX option[value="noDispersion"]').attr('selected',true);
    $('#centrageX').attr('disabled',true);
    $('#dispersionX').attr('disabled',true);
    $('.selectpicker').selectpicker('refresh');
  }else{
    $('#centrageX').attr('disabled',false);
    $('#dispersionX').attr('disabled',false);
    $('.selectpicker').selectpicker('refresh');
  }
});

原文：https://stackoverflow.com/questions/33730450