带有转到 url 按钮的相关下拉列表

Question

尝试创建两个下拉列表，其中第二个依赖于第一个，第二个包含 URL 值以及转到 URL 的 GO 按钮。例如 - 从几个州的列表中选择，然后从所选州的几个城市的列表中选择（在您选择一个州之前无法选择），然后点击一个提交按钮，该按钮转到该城市页面的 URL。最好没有 JQuery。我已经尝试将第二个“MA”商店转到一个 url，但 url 部分不起作用。任何帮助，将不胜感激。谢谢！ https://jsfiddle.net/mkallis/xws1ykto/67/

<script type="text/javascript">
    $(function(){

        var $cat = $("#state"),
            $subcat = $(".subcat");

        $cat.on("change",function(){
            var _rel = $(this).val();
            $subcat.find("option").attr("style","");
            $subcat.val("");
            if(!_rel) return $subcat.prop("disabled",true);
            $subcat.find("[rel="+_rel+"]").show();
            $subcat.prop("disabled",false);
        });

    });

    function goToNewPage()
        {
            var url = document.getElementById('store').value;
            if(url != 'none') {
                window.location = url;
            }
        }
</script>

<style type="text/css">
    .subcat option {
        display: none;
    }
    .subcat option.label {
        display: inline;
    }
</style>

<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>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>

Answer 1

这里的问题可能与 JSFiddle 何时/如何注入您在 js 部分中定义的脚本有关。打开控制台，然后单击提交，表示该函数未定义，这意味着在创建提交按钮时它不知道该函数是什么。

为了证明这一点，我将该函数的定义移到了 html 中，在提交按钮之前，它可以工作。

<script> function yourfunction(){} </script>
<form>
    <!-- yourfunction guaranteed to be defined here -->
    <button onclick="yourfunction()"></button>
</form>

演示：https://jsfiddle.net/p2qwngxe/1/