Question

I’ve been trying to get a better grasp on jQuery and have been coming up with random pages to test some of it. I made a small mock travel agency page that has a form with options for origin and destination countries. The default origin/destination is the US, and a second option for the States appears underneath it. When the user chooses something other than the US, the states option disappears, except in Chrome.

website: http://www.stephenweigel.com/portfolio/somewheresomehow

Script: (does have $(document).ready(function() , didn’t think I needed to post the whole JS file)

 $('#destination').click(function(){
            // Show US States if Destination is US
            var destination = $('#destination').val();
            var domestic = 'USA';

            if (destination == domestic) {
                $('#usDest').css("display","inline");
            } else {
                $('#usDest').css("display","none");
            } 

html:

<div>
      <select name="destination" id="destination">
        <option value="USA" selected="selected">USA</option>
        <option value="Canada">Canada</option>
        <option value="Mexico">Mexico</option>
        <option value="Italy">Italy</option>
         <option value="France"> France </option>
        <option value="Spain"> Spain </option>
      </select> <!--end destination-->
     </div>
     <div>
     <select name="usDest" id="usDest">
        <option value="Alabama" selected="selected">Alabama</option>
            <option value="Alaska">Alaska</option>
            <option value="Arizona">Arizona</option>
            <option value="Arkansas">Arkansas</option>
            <option value="California">California</option>
            <option value="Colorado">Colorado</option>
            <option value="Connecticut">Connecticut</option>
            <option value="Delaware">Delaware</option>
            <option value="District of Columbia">District of Columbia</option>
            <option value="Florida">Florida</option>
            <option value="Georgia">Georgia</option>
            <option value="Hawaii">Hawaii</option>
            <option value="Idaho">Idaho</option>
            <option value="Illinois">Illinois</option>
            <option value="Indiana">Indiana</option>
            <option value="Iowa">Iowa</option>
            <option value="Kansas">Kansas</option>
            <option value="Kentucky">Kentucky</option>
            <option value="Louisiana">Louisiana</option>
            <option value="Maine">Maine</option>
            <option value="Maryland">Maryland</option>
            <option value="Massachusetts">Massachusetts</option>
            <option value="Michigan">Michigan</option>
            <option value="Minnesota">Minnesota</option>
            <option value="Missouri">Missouri</option>
            <option value="Montana">Montana</option>
            <option value="Nebraska">Nebraska</option>
            <option value="Nevada">Nevada</option>
            <option value="New Hampshire">New Hampshire</option>
            <option value="New Jersey">New Jersey</option>
            <option value="New Mexico">New Mexico</option>
            <option value="New York">New York</option>
            <option value="North Carolina">North Carolina</option>
            <option value="North Dakota">North Dakota</option>
            <option value="Ohio">Ohio</option>
            <option value="Oklahoma">Oklahoma</option>
            <option value="Oregon">Oregon</option>
            <option value="Pennsylvania">Pennsylvania</option>
            <option value="Rhode Island">Rhode Island</option>
            <option value="South Carolina">South Carolina</option>
            <option value="South Dakota">South Dakota</option>
            <option value="Tennessee">Tennessee</option>
            <option value="Texas">Texas</option>
            <option value="Utah">Utah</option>
            <option value="Vermont">Vermont</option>
            <option value="Virginia">Virginia</option>
            <option value="Washington">Washington</option>
            <option value="West Virginia">West Virginia</option>
            <option value="Wisconsin">Wisconsin</option>
            <option value="Wyoming">Wyoming</option>
      </select> <!-- end usDest-->
      </div>

Maybe I’m missing something but it seems strange that it would work for Firefox, Safari and Internet Explorer 9 but wouldn’t work in chrome.

I’ve also tried using:

  $('#origin').click(function(){
            var origin = $('#origin').val();
            var domestic = 'USA';

            if (origin == domestic) {
                $('#usOrigin').removeClass("invisible");
                $('#usOrigin').addClass("visible");
            } else {
                $('#usOrigin').removeClass("visible");
                $('#usOrigin').addClass("invisible");
            }

with the css:

.visible {
    display: inline;

}

.invisible {
    display: none;  
}

but that doesn’t work either in chrome. (works in other browsers)

Any suggestions would be appreciated.

Answer 1

You could easily use hide() and show() to accomplish this effect with jQuery. But based, on what people are posting here, I’m guessing you’re having a problem with JS propagation (an error in the code). This could be caused by a faulty extension, which is why you’re getting it, and no one else is. Test your app in Incognito Mode to easily and temporarily disable extensions. Launch Incognito Mode in Chrome with CTRL + SHIFT + N