Зависимые выпадающие списки с кнопкой перехода на URL - PullRequest
Новая
       32

Зависимые выпадающие списки с кнопкой перехода на URL

1 голос
/ 30 апреля 2019

Попытка создать два раскрывающихся списка, где 2-й имеет зависимость от первого, а второй содержит значения URL с кнопкой GO, которая переходит к URL.Например - выберите из списка нескольких штатов, затем выберите из списка нескольких городов в выбранном штате (недоступно для выбора, пока вы не выберете штат), затем нажмите кнопку отправки, которая переходит к URL-адресу страницы этого города.Желательно без JQuery.Я дал ему шанс, когда 2-й магазин "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>

1 Ответ

0 голосов
/ 30 апреля 2019

Проблема здесь, вероятно, связана с тем, когда / как JSFiddle внедряет скрипт, который вы определили в разделе js.Открыв консоль и нажав «Отправить», она сказала, что функция не была определена, то есть во время создания кнопки «Отправить» она понятия не имела, что это за функция.

Чтобы доказать это, я перенес определениеэтой функции в HTML, перед кнопкой отправки, и она работает. 

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

DEMO: https://jsfiddle.net/p2qwngxe/1/

...