JQuery Bootstrap selectpicker on('change') set selec

JQuery Bootstrap selectpicker on('change') set selected

本文关键字：set selec change Bootstrap JQuery selectpicker on      更新时间：2023-09-26

我正在尝试根据另一个选择的值禁用并默认选择<select>。当我第一次在<select> choixVarX中选择一个选项（例如"Pop"）时，<select> parametersX会执行我希望它执行的操作：禁用前两个<optgroup>，默认选择"pasCentre"answers"noDispersion"。然而，当我将choixVarX更改为另一个不触发我想要的行为的参数时（例如"PropRetraite"），然后再次将其更改为一个触发我想要行为的参数（例如"FoyersComposes"或"Foyers Discaux"），第二个<select>参数X的行为很奇怪：第一个<optgroup>被禁用，但"pasCentre"answers"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');
  }
});

我认为这将是一个适合您的解决方案，我将您的属性更改为prop-insd，并对long-if语句进行了切换。不幸的是，datamax-options="1"不起作用，必须至少为datamax-ooptions="2"。所以希望它能有所帮助，你可以在这里使用jsfiddle：https://jsfiddle.net/txy4teks/1/

$('#choixVarX').on('change', function () {
    switch ($(this).val()) {
        case 'Pop':
        case 'FoyersImposes':
        case 'FoyersFiscaux':
            $('#centrageX option[value="median"]').prop('selected', false);
            $('#centrageX option[value="moyenne"]').prop('selected', false);
            $('#centrageX option[value="pasCentre"]').prop('selected', true);
            $('#dispersionX option[value="minmax"]').prop('selected', false);
            $('#dispersionX option[value="ecarttype"]').prop('selected', false);
            $('#dispersionX option[value="noDispersion"]').prop('selected', true);
            $('#centrageX').prop('disabled', true);
            $('#dispersionX').prop('disabled', true);
            $('.selectpicker').selectpicker('refresh');
            break;    
        case 'PropRetraite':
        case 'PropFoyersImposes':
        case 'RevMoyen':
            $('#centrageX').prop('disabled', false);
            $('#dispersionX').prop('disabled', false);
            $('.selectpicker').selectpicker('refresh');
            break;
    }
});
相关文章：