jQuery: Showing and Hiding Select Elements Kills Chrome

Question

Hi folks,

I have two select inputs set to display:none. Based on change() in another element I use jQuery to show() or hide() them. All of my browser tests look great except for Chrome which dies with the "Something went wrong..." message. Here is my function

   $(document).ready(function(){
    $("#supplier_type").change(function () {
      if ($("#supplier_type").val() == 'Wholesaler') {
        $("#retail_fulfillment").hide("slow");
        $("#retail_fulfillment").val("");
        $("#wholesale_fulfillment").show("slow");
      } else {
        if ($("#supplier_type").val() == 'Retailer') {
        $("#wholesale_fulfillment").hide("slow");
        $("#wholesale_fulfillment").val("");
        $("#retail_fulfillment").show("slow");
        }
      }
    });

Anyone have any advice on this?

TIA!

JG

Answer 1

Hi jerrygarciuh,

#wholesale_fulfillment and #retail_fullfillment are both select-elements, isn't it? You set the value of a select element to nothing. I guess that's the problem; it's impossible.

This will be your code:

 $(document).ready(function(){
    $("#supplier_type").change(function () {
        if ($(this).val() == 'Wholesaler') {
            $("#retail_fulfillment").hide("slow")
            //$("#retail_fulfillment").find('option.empty').attr('selected', 'selected');
            $("#wholesale_fulfillment").show("slow");
        } else {
            if ($(this).val() == 'Retailer') {
            $("#wholesale_fulfillment").hide("slow");
            //$("#wholesale_fulfillment").find('option.empty').attr('selected', 'selected');
            $("#retail_fulfillment").show("slow");
            }
        }
    });
});

If you still want to select an <option/>-tag with an empty value, just add a class to that <option/>-tag and uncomment the commented Javascript-code:

<select id="#wholesale_fulfillment">
    <option value="" class="empty">---</option>
    <option value="something">Wholesaler</option>
</select>

Answer 2

Per naivists' comment above I tried calling hide() with no parameters. This did not resolve the issue but removing the args from both show() and hide() did resolve Chrome's issue.

Answer 3

Anyone have any advice on this?

Yes. See if a bug has already been filed for this issue.

If not, file one. Include a minimal test case; pastehtml.com is nice for that sort of thing.

And hack around the crash as best you can.

Answer 4

Hi, has anyone found a solution to this? I am having the same exact issue with show('slow') and hide('slow') only in Chrome too. I would hate to have to remove those parameters and the nice little effect just to get this working for Chrome.