Javascript/jQuery not working in Firefox, Safari and IE. Fine in Opera and Chrome

Question

I'm using some code that worked fine just a couple of weeks ago, I got it from here and checked before using. For some reason it now only works in Chrome and Opera, even the original on jsfiddle. I'm sure I tested in Firefox first, like allways. I'm completely baffled.

The options of the 2nd drop down are supposed to be dependent on the selection of the first.

<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/

you have no script tag in the code you posted, it's a wonder it works in any browser ... however, the fiddle works fine in all browsers — Jaromanda X, Dec 13 '16 at 13:55
Sorry, should have mentioned: javascript is in an external .js file. jquery is included, function get's called. — esel3000gt, Dec 13 '16 at 14:34

score 0 · Answer 1 · answered Dec 13 '16 at 13:56

Your code works on Firefox and internet explorer (safari not tested.)

please make sure that you have jQuery included before the code gets executed.
also check the console for any errors pointing towards the problem.
also the javascript needs to be in a <script> tag if it is not in an .js file.

if this doesn't help feel free to provide more details.

P.S. I need 50 reputation for commenting. so i will provide this as an answer although it probably doesn't answer your question.

Correct. Sry. *deleted* - this one next. – esel3000gt Dec 13 '16 at 15:09 — esel3000gt, Dec 13 '16 at 15:09

score 0 · Answer 2 · edited May 23 '17 at 11:53

Hiding/Showing options might behave strangely in some browsers. Probably due to differences in the way related APIs are implemented. Here is an example using same logic from a previous answer. This should work fine in all browsers.

Instead of hide/show options are cached in first select using jQuery data(). When first option changes options are filtered from this cache and updated by updating the entire options list instead of show/hide.

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

Thx.. that's a solution in any case. – esel3000gt Dec 13 '16 at 15:06 — esel3000gt, Dec 13 '16 at 15:06

Javascript/jQuery not working in Firefox, Safari and IE. Fine in Opera and Chrome

2 Answers2