Select Optionの表示問題

Question

私のページには2つの選択肢があり、それらはサーバに表示されます。 無効なオプションにhidden属性を適用して、下位選択で選択できるオプションをフィルタリングする「マスター」セレクトをここで選択します。

たとえば、このボトムセレクトには50個のオプションがありますが、そのうちの3個だけが「タイラー保険」に適用されます（下の図を参照）。無効なオプションは隠されています。 しかし、多くを非表示にすると、選択オプションが崩壊し、右側に小さいスクロールバーを持つオプションが1つだけ表示されます。矢印をクリックすると、オプションリストが予想どおりに上下にスクロールされ、その他のオプションはすべてそこに表示されます。これは機会にのみ発生します。ここで

このロジックを行い変更機能です。

$(top).change(function() { 
//First, we make all options invisible. 
    $(bottom).find('option').prop("hidden", true); 
//Then, if the selected option in the top select's ID is the same as the 
//stored one on the bottom option, we unhide the option. 
    $(bottom).find('option[data-id="' + this.selectedOptions[0].dataset.id + '"]').prop("hidden", false); 
} 

この単列ボックスに崩壊から見えるのオプションを防ぐ方法があるかどうか私の質問は、もしそうなら、どのように私はそうやって行きますか？

追加情報：

何も他の変更のいずれかを選択し、他の選択は、この問題を持っているように見えません。

Google Chromeバージョン63.0.3239.84（公式ビルド）（64ビット版）を対象としています。 jQuery 2.1.4とBootstrap 3.3.0を利用しています。

最新のFirefox 57.0.2（64ビット）にしようとすると...

Answer 1

私が思いついた解決策をこのエラーを持っているように見えるので、私はそれがChromeが選択の表示方法に問題があると信じていません;

$(top).change(function() { 
//First, we remove all options. 
$(bottom).empty() 
//Declaring variables here, for clarity; I'd inline them normally. 
//The selected option: 
var selectedID = this.selectedOptions[0].dataset.id; 
//filtered options 
var options = $($("#OptionListTemplate").html()) 
       .filter(function (obj) { return $(this).data("top-id") == selectedID }); 
//simply append the filtered options to the select. 
$(bottom).append(options); 
} 

そして必要なマークアップ。

<template id="OptionListTemplate"> 
     <option data-top-id="0">Select an option</option> 
     <!--- Populated by controller, more options would go here.--> 
    </template> 

私は、隠しプロパティやスタイルを使用する代わりに、テンプレート内のすべての値をページに保存し、必要のないものを除外します。これにより、ディスプレイの問題が適切に解決されます。