Question

我有一个选择的下拉菜单，我正在尝试添加URL链接。但是，下拉菜单并不像选择一个那样简单，而是转到URL。

首先，我不希望用户直接访问选择的网址。相反，他们需要能够选择值，然后单击＆＃34;提交＆＃34;按钮如下。然后，该按钮会将它们带到相关的选定URL。

其次，根据所选的值，您将转到该网址，或者您将看到第二个下拉列表。例如，第一个菜单有5个值。值1到4将使用户使用不同的URL。但是值5将向用户显示第二个菜单。然后，一旦他们从此菜单中选择了一个值，他们就会被带到该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

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

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

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;

});

将选择值发送到URL页面

2 个答案: