Question

我有两个看起来像这样的名单。

<select class="form-control" id="arrondissement" required="required" aria-invalid="false" name="arrondissement">
  <option value="1">1er arrondissement</option>
  <option value="2"><span>2ème arrondissement</span></option>
  <option value="3"><span>3ème arrondissement</span></option>
  <option value="4"><span>4ème arrondissement</span></option>
  <option value="5"><span>5ème arrondissement</span></option>
</select>

<select class="form-control classeNomIgh" id="nomIGH" required="required" aria-invalid="false" name="nomIGH">
  <!-- remplacer les valeurs "précodées" ('eiffel', 'montparnasse', 'tgi') par la liste des valeurs renvoyées par l'appel au WebService -->
  <option value="" label="---">---</option>
  <option data-arrondissement="1" value="IGH1">IGH1</option>
  <option data-arrondissement="2" value="IGH2">IGH2</option>
  <option data-arrondissement="3" value="IGH3">IGH3</option>
  <option data-arrondissement="4" value="IGH4">IGH4</option>
  <option data-arrondissement="5" value="IGH5">IGH5</option>
</select>

当我选择一个＆＃39; arrondissement＆＃39;在第一个drowdown列表中，第二个将仅显示data-arrondissement具有相同值的那些。

Answer 1

您可以使用解决方案

＆＃13;

$('#arrondissement').change(function(){
  $('#nomIGH').find('option[data-arrondissement=' + $(this).find('option:selected').val() +']').attr('selected', 'selected');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="arrondissement" required="required" aria-invalid="false" name="arrondissement">
  <option value="1">1er arrondissement</option>
  <option value="2"><span>2ème arrondissement</span></option>
  <option value="3"><span>3ème arrondissement</span></option>
  <option value="4"><span>4ème arrondissement</span></option>
  <option value="5"><span>5ème arrondissement</span></option>
</select>

<select class="form-control classeNomIgh" id="nomIGH" required="required" aria-invalid="false" name="nomIGH">
  <!-- remplacer les valeurs "précodées" ('eiffel', 'montparnasse', 'tgi') par la liste des valeurs renvoyées par l'appel au WebService -->
  <option value="" label="---">---</option>
  <option data-arrondissement="1" value="IGH1">IGH1</option>
  <option data-arrondissement="2" value="IGH2">IGH2</option>
  <option data-arrondissement="3" value="IGH3">IGH3</option>
  <option data-arrondissement="4" value="IGH4">IGH4</option>
  <option data-arrondissement="5" value="IGH5">IGH5</option>
</select>

＆＃13;

希望这会对你有所帮助。

Answer 2

我认为这会帮助你

＆＃13;

$(function(){
    $('#groups').on('change', function(){
        var val = $(this).val();
        var sub = $('#sub_groups');
        $('option', sub).filter(function(){
            if (
                 $(this).attr('data-group') === val 
              || $(this).attr('data-group') === 'SHOW'
            ) {
              if ($(this).parent('span').length) {
                $(this).unwrap();
              }
            } else {
              if (!$(this).parent('span').length) {
                $(this).wrap( "<span>" ).parent().hide();
              }
            }
        });
    });
    $('#groups').trigger('change');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="groups">
    <option value='1'>1er arrondissement</option>
    <option value='2'>2ème arrondissement</option>
    <option value='3'>3ème arrondissement</option>
    <option value='4'>4ème arrondissement</option>
    <option value='5'>5ème arrondissement</option>
<select>
    
<select id="sub_groups">
    <option data-group='SHOW' value='0'>-- Select --</option>
    <option data-group='1' value='IGH1'>IGH1</option>
    <option data-group='2' value='IGH2'>IGH2</option>
    <option data-group='3' value='IGH3'>IGH3</option>
    <option data-group='4' value='IGH4'>IGH4</option>
    <option data-group='5' value='IGH5'>IGH5</option>
    <select>

＆＃13;

Answer 3

这将帮助您使用jquery更改事件

$( "#arrondissement" ).change(function() {

    var conceptName = $('#arrondissement').find(":selected").val();
    $("#nomIGH > option").each(function() {
        if(jQuery(this).attr('data-arrondissement') == conceptName){
          $("#nomIGH option[data-arrondissement='"+conceptName+"']").prop('selected', true);
        }
    });
});

https://jsfiddle.net/7hgw8h69/

使用jQuery过滤两个下拉列表

3 个答案: