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

Question

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

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

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

---

2。 MAKE（奔驰、宝马等）

---

3.型号（CLK、X5等）

---

所以，当从 FIRST 列表中选择 VEHICLE TYPE 时，

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

然后在 THIRD 列表中出现对应 MAKE 的模型（Mercedes-CLK、BMW-X5)。

现在的问题是，被禁用或无效的品牌或型号不会显示在 DESKTOP 上，但在 MOBILE 上它们会显示，但仍然无效。

第一个问题：如何从 MOBILE 的列表中隐藏禁用的元素？

第二个问题：我可以禁用 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('禁用', '禁用');

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

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

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

Now as far as the hiding and showing, simply do that to the appropriate list of options filtered as you indicate to hide the disabled ones. 使用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>