Question

我有以下代码，用于在页面启动和选择时修改2个下拉菜单。第一个包含主要类别，它们应该适应页面类别，它在页面加载时是一个。然后第二个提供不同的选项，具体取决于第一个选择的内容（通过页面开始或选择）。

以下代码在主要的现代浏览器中完美运行，但在Firefox中不是这样。

在第一次下拉我的pageCat选项时出现的问题是，移动到顶部但是在Firefox中旧文本保留在可见字段中。我在这里有语义问题吗？

jQuery(document).ready(function(){

// get the page category
var pageCat = jQuery("#page-wrapper .breadcrumb").find("li.active").text().replace(/\s+/g, '-').toLowerCase();

// get inserted post category instead in case of single seminar
if ( jQuery( ".courses-detail" ).length ) {
    jQuery('.courses-detail').each(function() {
        $courseCat =  this.className.match(/(^|\s)sw_course_cat\S+(\s|$)/);
    } );
    pageCat = $courseCat[0].replace('sw_course_cat-','').trim();
};

// store drop down menus
var $dropDown = jQuery('#page-wrapper select[name="courses[category]"]');
var $dropDown_2 = jQuery('#page-wrapper select[name="courses[location]"]');


// make it the first in the drop down list
// remove “all categories” option
var $standard = $dropDown.find('option[data-link="http://www.falkenberg-seminare.de/cms/edu-course/"]');
$standard.remove();

// change position
var $startList = $dropDown.find('option[value="' + pageCat + '"]');
$startList
    .remove();
$dropDown.prepend( $startList );

// filter the second drop down based on first drop down option selected
var $options = $dropDown_2.clone(); // this will save all initial options in the second dropdown

$dropDown.change( function() {
  var filters = [];
  if ( jQuery(this).val() == "" ) {
    jQuery( this).find("option").each(function(index, option) {
      if ( jQuery(option).val() != "" )
        filters.push(jQuery(option).val());
    });
  } else {
    filters.push(jQuery(this).val())
  }

  $dropDown_2.html("");

  jQuery.each(filters, function(index, value) {
    $options.find("option").each(function(optionIndex, option) { // a second loop that check if the option value starts with the filter value
      if ( jQuery(option).val().startsWith(value) )
        jQuery(option).clone().appendTo( $dropDown_2 );
    } );

  } );
  } );

  $dropDown.trigger('change');

} );

我很遗憾没有提供小提琴，但我无法想象如何模拟pageCat选择以在页面加载时正确演示。但也许有一些我不知道的已知Firefox代码问题（谷歌没有帮助）。

非常感谢您的帮助！

Answer 1

扩展我的代码：

// same initially on page load
$dropDown
  .trigger('change')

  // add this for Firefox
  .val(pageCat)
  .change();

解决了我的问题。我还在我的select标签中添加了html属性：autocomplete =“off”以避免Firefox缓存。如果有人感兴趣或有同样的问题，请发表评论，我会添加一个小提琴。

修改下拉列表在Firefox中无法正常工作

1 个答案: