联动Dropdown Menu本地失效求助（JSFiddle可正常运行）

以下是针对你遇到的问题的排查和修复方案：

核心问题1：jQuery加载失败 #

你使用的jQuery CDN地址是//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js，这种相对协议URL在本地用file://协议打开页面时，会被解析成file://cdnjs.cloudflare.com/...，导致无法加载jQuery库。而JSFiddle是在HTTP环境下运行，所以不受影响。

修复：将jQuery的src改为完整的HTTPS地址：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

核心问题2：Option显示控制的兼容性问题 #

部分浏览器（如IE、旧版Chrome）对<option>的display:none支持不佳，用jQuery的show()/hide()无法正确控制选项的显示状态。

修复：改用prop("hidden", ...)来控制选项的隐藏/显示，替换原代码中的show()/hide()：

$subcat.find("option").prop("hidden", true);
// 替换原来的 $subcat.find("option").attr("style","").hide();

$subcat.find("[rel="+_rel+"]").prop("hidden", false);
// 替换原来的 $subcat.find("[rel="+_rel+"]").show();

额外优化：初始选项显示问题 #

第二个下拉菜单的初始选项<option value>Select a store</option>没有label类，按照你的CSS规则会被隐藏，导致用户看不到提示文字。

修复：给该选项添加class="label"：

<option value class="label">Select a store</option>

修改后的完整代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>联动下拉菜单</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</head>

<body>
        <style type="text/css">
            .subcat option {
                display: none;
            }
            .subcat option.label {
                display: inline;
            }
        </style>
<script type="text/javascript">
    function goToNewPage()
  {
    var url = document.getElementById('store').value;
    console.log(url);
    if(url != 'none' && url) {
      window.location = url;
    }
  }
</script>
<script type="text/javascript">
$(function(){
    
    var $cat = $("#state"),
        $subcat = $(".subcat");
    
    $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").prop("hidden", true);
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel="+_rel+"]").prop("hidden", false);
        // 同时显示初始提示选项
        $subcat.find(".label").prop("hidden", false);
        $subcat.prop("disabled",false);
    });
    
});
</script>
<form id="formname" name="Sate-Store">
    
                    <select name="state" id="state">
                        <option value="">Select state</option>
                        <option value="ma">MA</option>
                        <option value="me">ME</option>
                        <option value="nh">NH</option>
                    </select>
                    <select disabled="disabled" class="subcat" id="store" name="store">
                        <option value class="label">Select a store</option>
                        <!-- MA -->
                        <option rel="ma" value="ma_store_1">MA Store 1</option>
            <option rel="ma" value="http://www.google.com">MA Store 2</option>
                        <option rel="ma" value="ma_store_3">MA Store 3</option>
                        <option rel="ma" value="ma_store_4">MA Store 4</option>
                        <option rel="ma" value="ma_store_5">MA Store 5</option>
                        <!-- ME -->
                        <option rel="me" value="me_store_1">ME Store 1</option>
                        <option rel="me" value="me_store_2">ME Store 2</option>
                        <option rel="me" value="me_store_3">ME Store 3</option>
                        <option rel="me" value="me_store_4">ME Store 4</option>
                        <option rel="me" value="me_store_5">ME Store 5</option>
                        <!-- MH -->
                        <option rel="nh" value="nh_store_1">NH Store 1</option>
                        <option rel="nh" value="nh_store_2">NH Store 2</option>
                        <option rel="nh" value="nh_store_3">NH Store 3</option>
                        <option rel="nh" value="nh_store_4">NH Store 4</option>
                        <option rel="nh" value="nh_store_5">NH Store 5</option>
                    </select>
          <input type=button value="Go" onclick="goToNewPage()" />

    </form>

</body>
</html>

额外检查项 #

• 打开浏览器控制台（F12），查看是否有JS报错，这是排查本地运行问题的关键
• 确保本地文件编码为UTF-8，避免乱码导致的JS解析错误

内容的提问来源于stack exchange，提问作者FlyBoy