Question

尝试创建两个下拉列表，其中第二个依赖第一个，第二个包含URL值，并带有转到该URL的GO按钮。例如-从几个州的列表中选择，然后从选定州的几个城市的列表中选择（直到您选择一个州才可以选择），然后单击提交按钮，该按钮转到该城市页面的URL。最好没有JQuery。我已经给第二家“ MA”商店添加了网址，但网址部分无法正常工作。任何帮助，将不胜感激。谢谢！ 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/

带有url按钮的从属下拉列表

1 个答案: