将选择值发送到URL页面

Question

我有一个选择的下拉菜单，我试图添加URL链接到。但是，下降并不像选择一个并转到URL那么简单。

首先，我不希望用户直接进入选择的URL。相反，他们需要能够选择值，然后单击下面的"Submit“按钮。然后，按钮应该将它们带到相关的选定URL中。

其次，取决于所选的值，您要么转到URL，要么将显示第二个下拉列表。例如，第一个菜单有5个值。值1到4将使用户访问不同的URL。但是，值5将为用户提供第二个菜单。然后，一旦他们从这个菜单中选择了一个值，他们就会被带到那个URL。

我已经在JSFiddle上设置了表单，但我很难找到如何将值输入URL，以及如何只在用户单击Submit按钮时才将其发送到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

首先，您有两次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;   
});

只需将您想要的链接放在value属性中即可。

Answer 2

你是说添加这样的东西？

$("#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;

});