Question

我正在努力解决以下问题。

在我的wordpress网站上，我有一个下拉过滤器列表

1 。车辆类型（敞篷车，轿跑车等）

2 。制造（奔驰，宝马等）

3。模型（CLK，X5等）

因此，从 FIRST 列表中选择车辆类型时，

在 SECOND 中为所选项目显示相应的 MAKES

，然后出现在 THIRD 列表中，然后模型与 MAKE （ Mercedes-CLK ， BMW-X5 >）。

现在的事情是，已禁用或不活动的品牌或模型不会在桌面上显示，但在MOBILE上会显示，尽管它们仍然不活动。

第一个问题：如何从“移动”上的列表中隐藏禁用的元素？

第2个问题：我是否可以禁用MAKES和MODELS，除非选择了VEHICLE TYPE？

在下面，您可以查看列表的后端代码。

var car_dealer = {};

（函数（$）{ / * *在提交时从空参数中清除表单URL * / $（'。vehicle-search-form'）。submit（function（）{ $（this）.find（“ input [type ='number']”“）.filter（function（）{ return（$（this）.attr（'min'）== $（this）.attr（'value'）|| $（this）.attr（'max'）== $（this）.attr（'value '））; }）。attr（'disabled'，'disabled'）;

    $(this).find( "input[type='search']" ).filter(function(){
        return ! $(this).val();
    }).attr( 'disabled', 'disabled' );

    $(this).find( "select" ).filter(function(){
        return ! ( $(this).val() && $(this).val() != '-1');
    }).attr( 'disabled', 'disabled' );


})

/*
 * Disables all models that do not fit the selected make
 */
$('#car_dealer_field_vehicle_type').on('change',function(){
    var makeName = $(this).find( 'option:selected' ).attr( 'data-type' );

    $('#car_dealer_field_make option')
    // first, disable all options
    .attr( 'disabled', 'disabled' )
    // activate the corresponding models
    .filter( '[data-type="' + $.trim( makeName ) + '"], [value="-1"]' ).removeAttr( 'disabled' )
    // remove previous value
    .parent().val( -1 );
});
$('#car_dealer_field_make').on('change',function(){
    var makeName = $(this).find( 'option:selected' ).attr( 'data-make' );

    $('#car_dealer_field_model option')
    // first, disable all options
    .attr( 'disabled', 'disabled' )
    // activate the corresponding models
    .filter( '[data-make="' + $.trim( makeName ) + '"], [value="-1"]' ).removeAttr( 'disabled' )
    // remove previous value
    .parent().val( -1 );
});

}（jQuery））;

我非常感谢，并希望很快能收到您的来信！

Answer 1

我知道这是旧的，但我们开始了。

这是事件处理程序 - 稍微修改了一下，只有一个选择事件处理程序。

现在就隐藏和显示而言，只需按照您指示隐藏已禁用选项的过滤选项列表执行此操作。使用 prop("disabled",true) 禁用，而不是属性。

我遗漏了如何重新启用并在需要时显示，但这很简单 .find('option').prop('disabled",false).show();

(function($) {
  /* * Cleans the form URL from empty parameters on submit */
  $('.vehicle-search-form').on('submit', function(e) {
    // might want to prevent the submit?
    e.preventDefault();

    $(this).find("input[type='number']")
      .filter(function() {
        return ($(this).attr('min') == $(this).attr('value') ||
          $(this).attr('max') == $(this).attr('value'));
      }).prop('disabled', true);

    $(this).find("input[type='search']")
      .filter(function() {
        return !$(this).val();
      }).prop('disabled', true);

    $(this).find("select").filter(function() {
      return !($(this).val() && $(this).val() != '-1');
    }).prop('disabled', true);
  });

  // here we can create one custom event handler to do the disable
  $('#car_dealer_field_make')
    .on('change', function() {
      var makeName = $(this).find('option:selected').data('make');
      $(this).trigger("custom-set-me", [makeName, "fun"]);
    });
  $('#car_dealer_field_vehicle_type')
    .on('change', function() {
      let makeName = $(this).find('option:selected').data('type');
      $(this).trigger("custom-set-me", [makeName, "fun"]);
    })
    // add the other one to the handler
    .add("#car_dealer_field_make")
    /*
     * Disables all that do not fit the selected 
     */
    .on('custom-set-me', function(event, compareTo, param2) {) {
      let iamMe = $(this);
      let options = iamMe.find('option');
      options
        .prop('disabled', true)
        // activate the corresponding models
        .filter(function() {
          return $(this).data('type') == $.trim(compareTo);
        }).val(-1).prop('disabled', false);
      // remove previous value
      iamMe.val(-1);
      options.filter(':diabled').hide();
    });

}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

隐藏列表中的非活动或禁用元素

1 个答案: