Единственная опция при выборе с отображением: ни один стиль не показывает выпадающий список в Firefox для Windows

Question

У меня есть два раскрывающихся списка, основанных на выборе первого раскрывающегося списка, второй заполненный список заполнен. В первом раскрывающемся списке выбора по умолчанию нет, поэтому при запуске в первом раскрывающемся списке просто отображается «опция выбора». При нажатии на выпадающий значок он покажет список опций. Второй выпадающий список, поскольку он не заполнен, поэтому он показывает просто «выбрать опцию»

Код скрипты JS (обновлено) https://jsfiddle.net/1g58yfnw/4/

HTML

<div>
    <select id="dropdown1" onChange="onSelection()">
        <option hidden="">Select option</option>
        <option value="1">Cars</option>
        <option value="2">Motor cycles</option>
    </select>
    <select id="dropdown2">
        <option hidden="">Select options</option>
    </select>

CSS

template,
    [hidden] {
        display: none 
    }

Код прекрасно работает для IE, Chrome и Safari, тогда как в Firefox для окон не отображается ни «опция выбора», ни выпадающий значок. Firefox для Mac работает отлично. Это похоже на ошибку в Firefox.

Пожалуйста, предложите любой обходной путь.

Answer 1

Привет, согласно вашему коду. У меня есть одна ошибка, при которой, если вы выбираете во второй раз ту же опцию при первом выборе, в это время второй выбор снова добавит ту же опцию, так что здесь ниже простой код поможет вам

var cars = {"1":"BMW", "2":"Rolls Royce", "3":"Mercedes", "4":"Lamborgini"};
var motorCycles=["Honda", "Yamaha", "kawasaki"];

function onSelection() {
  var x = $("#dropdown1").find(":selected").val();
  $('#dropdown2 option').remove();
  if( x === "1" ) {
  	$.each(cars, function(key, value) {
    	$("#dropdown2")
      	.append($("<option></option>")
        	.attr("value",key)
        	.text(value));
    });
	}
  if( x === "2" ) {
  	$.each(motorCycles, function(key, value) {
    	$("#dropdown2")
      	.append($("<option></option>")
        	.attr("value",key)
        	.text(value));
    });
	}
}

template,
[hidden] {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select id="dropdown1" onChange="onSelection()">
     <option hidden="">Select option</option>
     <option value="1">Cars</option>
     <option value="2">Motor cycles</option>
  </select>
  <select id="dropdown2">
     <option hidden="">Select options</option>
  </select>
</div>