Two dropdown lists with go to URL button not working in Safari

The second dropdown is dependent on the first dropdown's selected option. It's functioning properly in Chrome, FF but not in Safari. Any clue as to why this is happening would be greatly appreciated. https://jsfiddle.net/mkallis/wgfzpj5m/

 

Webkit often has trouble with find() when passing it attributes via []. This has been fixed in Blink (which Google forked from Webkit) some six or seven years ago, but Safari still goes full Gungan on this one... just like a lot of other things where Safari is basically aging like milk.

It's to that end I would not be trying to use jQuery or even JavaScript to create a UI like this anymore, and if I were to use scripting for it, I'd associate by ID or direct sibling, or manually populate, instead of the mess of confusing cryptic nonsense jQ saddles you with.

But honestly these days, I'd skip using option on the first one altogether and use radio-buttons instead, as then you could use CSS' :checked and adjacent sibling selectors to show/ide the following select and/or fieldset.

But then on the whole I've soured on SELECT. It feels intuitive, but so often it ends up such a PITA I want to scream at the display "Oh for F*** sake, just let me type it in".... for example when some asshat makes a select for birth year and I have to scroll back through 50+ options to get to it. To that end I'd probably replace that second drop-down with a list of anchors, skipping the form and the "go" altogether unless you are insisting on POST data.

Hence something more like:

<div class="sectionSelections">
	<input type="radio" name="selectState" id="select_ma" hidden>
	<input type="radio" name="selectState" id="select_nh" hidden>
	<input type="radio" name="selectState" id="select_ma" hidden>
	<div class="selectLabels" hidden>
		<h2>Select State</h2>
		<label for="select_ma">MA</label>
		<label for="select_me">ME</label>
		<label for="select_nh">NH</label>
	</div>
	<div class="subsections">
		<div>
			<h3>Taxachusetts Stores</h3>
			<ul>
				<li><a href="?ma_store_1">MA Store 1</a></li>
				<li><a href="?ma_store_2">MA Store 2</a></li>
				<li><a href="?ma_store_3">MA Store 3</a></li>
				<li><a href="?ma_store_4">MA Store 4</a></li>
				<li><a href="?ma_store_5">MA Store 5</a></li>
			</ul>
		</div><div>
			<h3>Mainiac Stores</h3>
			<ul>
				<li><a href="?me_store_1">ME Store 1</a></li>
				<li><a href="?me_store_1">ME Store 2</a></li>
				<li><a href="?me_store_1">ME Store 3</a></li>
				<li><a href="?me_store_1">ME Store 4</a></li>
				<li><a href="?me_store_1">ME Store 5</a></li>
			</ul>
		</div><div>
			<h3>Live free or <strong>DIE</strong> Stores</h3>
			<ul>
				<li><a href="?nh_store_1">NH Store 1</a></li>
				<li><a href="?nh_store_1">NH Store 2</a></li>
				<li><a href="?nh_store_1">NH Store 3</a></li>
				<li><a href="?nh_store_1">NH Store 4</a></li>
				<li><a href="?nh_store_1">NH Store 5</a></li>
			</ul>
		</div>
	<!-- .subsections --></div>
<!-- .sectionSelections --></div>

Code (markup):

Then use:

.sectionSelections > input:checked:nth-child(x) ~ .selectLabels div:nth-child(x)
to target which label to show

.sectionSelections > input:checked:nth-child(x) ~ .subsections div:nth-child(x)
to target which group of H3 + UL to show.

Creating however many (x) you think you'll need.

Advantage being scripting and CSS off it still presents a usable / functioning page, modern CSS you can style it to behave like the select or any other behavior you want without a single line of JavaScript needed. Even if I were to use JavaScript as the triggers (such as caring about IE7/earlier) I'd still use this general markup. I sure as shine-ola wouldn't be trying to detect "go" and trap it for navigation with scripttardery. PARTICULARLY with the idiotic halfwitted mentally-enfeebled train wreck laundry list of how NOT to code JavaScript that is jQuery.

If you REALLY wanted a "go" button with a form, I'd swap the anchors and list for radio's.