How to Recognize jQuery .change() on Select List in IE?

Question

There are several questions about this on SO (1,2,3,4), but all are extremely old and unhelpful.

This code works flawlessly in Chrome & Firefox, but how can I get Internet Explorer to cooperate? Right now in IE, you click a select option and it does nothing. Some have proposed .click() but that doesn't establish whether or not there was a change in the selected option, even though I couldn't seem to get .click() to work in IE11 anyway.

Any suggestions?

$(document).ready(function($) {
  $('.block-webform').hide();
  $('#contact-select option[value="select"]').attr("selected", "selected");

  $('#contact-select').change(function() {
    $('.block-webform').slideUp(600);
    $('#' + $(this).val()).slideDown(600);
  });
});

.block-webform {
  height: 30px;
  margin: 30px;
  background: lime;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="contact-select">
  <option value="select" selected="selected">- Select Reason for Contact -</option>
  <option value="block-webform-client-block-1" name="1">General Question</option>
  <option value="block-webform-client-block-2" name="2">Update Information</option>
  <option value="block-webform-client-block-3" name="3">Question About Order</option>
</select>

<div id="block-webform-client-block-1" class="block-webform">General Question</div>
<div id="block-webform-client-block-2" class="block-webform">Update Information</div>
<div id="block-webform-client-block-3" class="block-webform">Question About Order</div>

Fiddle: https://jsfiddle.net/9h7jLe64/1/

@WaleedIqbal, try it on my live demo site: http://dev.gmsaa.org/contact — WebMW, Dec 20 '18 at 11:42
It's working in IE too. Anyways you can try changing it to `$('#contact-select').off().on('change',function() });` — Sushil, Dec 20 '18 at 11:42
Can also confirm this works fine in IE10 & 11. If you are having issues, please edit the question to describe them and give the working code that produces them. — Rory McCrossan, Dec 20 '18 at 11:44
@WebMW it's working properly in this [link] (http://dev.gmsaa.org/contact) site too. Even in IE browser. — Sushil, Dec 20 '18 at 11:45
@SushilShrestha or anyone, could you please clear cache and try my demo link again? I had to revert it back to where it was in its original working state for Chrome & Firefox. This still does not work for me in IE11. — WebMW, Dec 20 '18 at 11:52

Harshit Tailor · Accepted Answer · 2018-12-20T12:30:51.320

2

gmsaa.js giving error

var url = new URL(document.location);

Object doesn't support this action.

That's why your change function is not working.

Change it to

var url = location.href;

Edit 2:

Add this function at top of js file

function gup( name, url ) {
            if (!url) url = location.href;
            name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
            var regexS = "[\\?&]"+name+"=([^&#]*)";
            var regex = new RegExp( regexS );
            var results = regex.exec( url );
            return results == null ? null : results[1];
        }

Change this code

var url = location.href;
        var form = gup("form");
        jQuery('#contact-select option[name="'+form+'"]').attr("selected", "selected");
        var formvalue = jQuery('#contact-select option[name="'+form+'"]').attr('value');
        jQuery('#' + formvalue).show();
        jQuery('#contact-select').change(function(){
            jQuery('.region-content .block-webform').slideUp(600);
            jQuery('#' + jQuery(this).val()).slideDown(600);
            callResize();
        });

edited Dec 20 '18 at 12:30

answered Dec 20 '18 at 12:01

Harshit Tailor

3,261
6
27
40

Wow! Really hoping this is the cause. Just made the change but a new error popped up a couple lines further down... "Unable to get property 'get' of undefined or null reference".... any idea? – WebMW Dec 20 '18 at 12:06
check this link https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters – Harshit Tailor Dec 20 '18 at 12:08
check Haim Evgi answer – Harshit Tailor Dec 20 '18 at 12:09
This answer unfortunately sets me back even further... Changing to var url = location.href; broke all browsers. Just reverted back to what works in Chrome & Firefox... even though several here said it was working in IE11 for them.... I am very confused. Any help would be greatly appreciated. – WebMW Dec 20 '18 at 12:24
Wow, you did it! I still don't understand why the demo was working for other people testing with IE11, but this works! Thank you for helping me out on this. I was sincerely lost after a few hours of banging my head. – WebMW Dec 20 '18 at 12:39

How to Recognize jQuery .change() on Select List in IE?

1 Answers1