Javascript / jQuery無法在Firefox，Safari和IE中運行。 精通Opera和Chrome

Question

我在幾周前使用了一些工作正常的代碼，我從這里得到它並在使用前進行檢查。 出於某種原因，它現在只適用於Chrome和Opera，甚至是jsfiddle上的原版。 我確定我首先在Firefox中測試過，就像所有人一樣。 我完全不知所措。

第二次下拉的選項應該取決於第一次下拉的選擇。

<form id="formname" name="formname" method="post" action="submitform.asp" >
    <table width="50%" border="0" cellspacing="0" cellpadding="5">
        <tr>
            <td width="41%" align="right" valign="middle">Category1 :</td>
            <td width="59%" align="left" valign="middle">
                <select name="category1" id="category1">
                    <option value="">Select Category1</option>
                    <option value="home_ware">Home Ware</option>
                    <option value="education">Education</option>
                    <option value="books">Books</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right" valign="middle">Category2 :</td>
            <td align="left" valign="middle">
                <select disabled="disabled" id="category2" name="category2">
                    <option value>Select Category2</option>
                    <!-- Home Ware -->
                    <option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
                    <option rel="home_ware" value="audio-video">Audio/Video</option>
                    <option rel="home_ware" value="beddings">Beddings</option>
                    <option rel="home_ware" value="camera">Camera</option>
                    <option rel="home_ware" value="cell-phones">Cell Phones</option>
                    <!-- Education -->
                    <option rel="Education" value="Colleges">Colleges</option>
                    <option rel="Education" value="Institutes">Institutes</option>
                    <option rel="Education" value="Schools">Schools</option>
                    <option rel="Education" value="Tuitions">Tuitions</option>
                    <option rel="Education" value="Universities">Universities</option>
                    <!-- Books -->
                    <option rel="Books" value="College Books">College Books</option>
                    <option rel="Books" value="Engineering">Engineering</option>
                    <option rel="Books" value="Magazines">Magazines</option>
                    <option rel="Books" value="Medicine">Medicine</option>
                    <option rel="Books" value="References">References</option>
                </select>
            </td>
        </tr>
    </table>
</form>

$(function(){

    var $cat = $("#category1"),
        $subcat = $("#category2");

    $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").attr("style","");
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel="+_rel+"]").show();
        $subcat.prop("disabled",false);
    });   
});

http://jsfiddle.net/v917ycp6/5/

Answer 1

您的代碼適用於Firefox和Internet Explorer（未經過測試的Safari）。

請確保在代碼執行之前包含jQuery。
還要檢查控制台是否有任何指向問題的錯誤。
如果javascript不在.js文件中，則javascript需要在<script>標記中。

如果這沒有幫助隨時提供更多細節。

PS我需要50點評論。 所以我會提供這個作為答案，雖然它可能沒有回答你的問題。

Answer 2

隱藏/顯示選項在某些瀏覽器中可能會表現得很奇怪。 可能是由於相關API實現方式的不同。 以下是使用前一個答案中相同邏輯的示例。 這應該適用於所有瀏覽器。

使用jQuery data（）在第一次選擇中緩存而不是隱藏/顯示選項。 當第一個選項更改選項從此緩存中過濾並通過更新整個選項列表而不是顯示/隱藏進行更新。

 $(function() { $("#category1").on('change', function() { if (!$(this).data('options')) { $(this).data('options', $('#category2 option').clone()); } var id = $(this).val(); var options = $(this).data('options').filter('[rel=' + id + ']'); if (options.length) { $('#category2').html(options).prop('disabled', false); } else { $('#category2').html($('<option value>No subcategory found</option>')).prop('disabled', true); } }); }); 

 #category2 option { display: none; } #category2 option.label { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="formname" name="formname" method="post" action="submitform.asp"> <table width="50%" border="0" cellspacing="0" cellpadding="5"> <tr> <td width="41%" align="right" valign="middle">Category1 :</td> <td width="59%" align="left" valign="middle"> <select name="category1" id="category1"> <option value="">Select Category1</option> <option value="home_ware">Home Ware</option> <option value="Education">Education</option> <option value="Books">Books</option> <option value="Unknown">No subcategory</option> </select> </td> </tr> <tr> <td align="right" valign="middle">Category2 :</td> <td align="left" valign="middle"> <select disabled="disabled" id="category2" name="category2"> <option value>Select Category2</option> <!-- Home Ware --> <option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option> <option rel="home_ware" value="audio-video">Audio/Video</option> <option rel="home_ware" value="beddings">Beddings</option> <option rel="home_ware" value="camera">Camera</option> <option rel="home_ware" value="cell-phones">Cell Phones</option> <!-- Education --> <option rel="Education" value="Colleges">Colleges</option> <option rel="Education" value="Institutes">Institutes</option> <option rel="Education" value="Schools">Schools</option> <option rel="Education" value="Tuitions">Tuitions</option> <option rel="Education" value="Universities">Universities</option> <!-- Books --> <option rel="Books" value="College Books">College Books</option> <option rel="Books" value="Engineering">Engineering</option> <option rel="Books" value="Magazines">Magazines</option> <option rel="Books" value="Medicine">Medicine</option> <option rel="Books" value="References">References</option> </select> </td> </tr> </table> </form>