用 jQuery 过滤两个下拉列表答案

【问题标题】：filter two dropdown list with jQuery用 jQuery 过滤两个下拉列表
【发布时间】：2018-04-28 14:32:31
【问题描述】：

我有两个这样的名单。

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

我该如何做到这一点，当我在第一个下拉列表中选择“区”时，第二个将仅显示具有相同值的 data-arrondissement。

【问题讨论】：

标签： jquery list filter dropdown

【解决方案1】：

给你一个解决方案

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

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

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

我认为这会对你有所帮助

$(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');
});

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

【讨论】：

嗨，谢谢您的回答，它似乎工作正常。但是我有一个问题，有什么办法可以摆脱<span> 元素？

【解决方案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/

【讨论】：