将 select 个值发送到 URL 个页面

Question

我有一个 select 下拉菜单，我正在尝试向其中添加 URL 链接。然而，下拉菜单并不像 select 那样简单，然后转到 URL.

首先，我不希望用户直接转到 select 上的 URL。相反，他们需要能够 select 该值，然后单击下面的 "Submit" 按钮。然后该按钮应将它们带到相关的 selected URL.

其次，根据 selected 的值，您将转到 URL 或看到第二个下拉菜单。因此，例如第一个菜单有 5 个值。值 1 到 4 会将用户带到不同的 URL。然而，值 5 将向用户显示第二个菜单。然后一旦他们 select 从这个菜单中获得一个值，他们就会被带到那个 URL。

我已经在 JSFiddle 上设置了表单，但我正在努力弄清楚如何将值放入 URL 以及如何仅将用户发送到 URL 当他们单击“提交”按钮时。

HTML:

<div id="select-1" class="form-group">
    <label>Select menu 1</label>
    <select id="select-1" name="level-1">
        <option value="default" disabled selected class="default">Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
    </select>
</div>
<div id="select-2" class="form-group">
    <label>Select menu 2</label>
    <select name="level-2">
        <option value="default" disabled selected class="default">Please select</option>
        <option value="sub1">Sub 1</option>
        <option value="sub2">Sub 2</option>
        <option value="sub3">Sub 3</option>
    </select>
</div>
<button type="submit" id="submit" class="btn btn-active">Submit</button>

jQuery:

// First off, lets disable the "Submit" button and hide the additional select menu.
$('#submit').removeClass('btn-active').addClass('btn-disabled');
$('#select-2').hide();

// If values 1-4 are selected then enable the "Submit" btn and keep the second select menu hidden.
// If value 5 is selected then keep the "Submit" btn disabled and display the second select menu. 
$('#select-1 select').change(function() {
    if($(this).val() == '5') {
        // Keep the submit btn disabled.
        $('#submit').removeClass('btn-active').addClass('btn-disabled');
        // Show the second select menu
        $('#select-2').show();
    } else {
        // Activate the submit btn.
        $('#submit').removeClass('btn-disabled').addClass('btn-active');
        // Keep the second select menu hidden
        $('#select-2').hide();
    };
});

// Once a value has been selected on the second select menu then activate the "Submit" btn.
$('#select-2 select').change(function() {
    if($(this).val() != 'option:[value="default"]') {
        $('#submit').removeClass('btn-disabled').addClass('btn-active');
    }
});

非常感谢您的帮助。

Answer 1

你是说添加这样的东西？

$("#submit").on('click',function(){
    var option1 = $("#select-1 :selected").val();
    var option2 = $("#select-2 :selected").val();
    window.location.href= window.location.href+="?option1="+option1+"&option2="            +option2;

});

Answer 2

首先你有两次 id="select-1" 那是个错误。

对于您的问题，您可以这样做：

HTML

<div id="select-1" class="form-group">
    <label>Select menu 1</label>
    <select id="level-1" name="level-1">
        <option value="default" disabled selected class="default">Please select</option>
        <option value="link1">Option 1</option>
        <option value="link2">Option 2</option>
        <option value="link3">Option 3</option>
        <option value="link4">Option 4</option>
        <option value="link5">Option 5</option>
    </select>
</div>
<div id="select-2" class="form-group">
    <label>Select menu 2</label>
    <select id="level-2" name="level-2">
        <option value="default" disabled selected class="default">Please select</option>
        <option value="sub1">Sub 1</option>
        <option value="sub2">Sub 2</option>
        <option value="sub3">Sub 3</option>
    </select>
</div>
<button id="submit" class="btn btn-active">Submit</button>

JS

// First off, lets disable the "Submit" button and hide the additional select menu.
$('#submit').removeClass('btn-active').addClass('btn-disabled');
$('#select-2').hide();

// If values 1-4 are selected then enable the "Submit" btn and keep the second select menu hidden.
// If value 5 is selected then keep the "Submit" btn disabled and display the second select menu. 
$('#select-1 select').change(function() {
    if($("#level-1")[0].selectedIndex == '5') {
        // Keep the submit btn disabled.
        $('#submit').removeClass('btn-active').addClass('btn-disabled');
        // Show the second select menu
        $('#select-2').show();
    } else {
        // Activate the submit btn.
        $('#submit').removeClass('btn-disabled').addClass('btn-active');
        // Keep the second select menu hidden
        $('#select-2').hide();
    };

});

// Once a value has been selected on the second select menu then activate the "Submit" btn.
$('#select-2 select').change(function() {
    if($(this).val() != 'option:[value="default"]') {
        $('#submit').removeClass('btn-disabled').addClass('btn-active');
    }
});

$('#submit').click(function(){
    var link;
    if($("#level-1")[0].selectedIndex == 5){
        link = $('#level-2').val();
    }else{
        link = $('#level-1').val();
    }
    window.location.href = link;   
});

只要把你想要的link放在值属性中即可。

将 select 个值发送到 URL 个页面

Send select values to URL pages

jquery

drop-down-menu