从多个下拉菜单中获取值，并将值添加到url - get value from multiple dropdown and add value to url

我试过这个代码，它可以显示所选的值并刷新页面。

这是HTML

<select name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
    <option value=""></option>
    <option value="1">Yearly</option>
    <option value="4">Quarterly</option>
</select>

这是JQuery:

<script>
$(function(){
    $("[name=selectperiode]").change(function(){
        var val = $(this).val();
        var stat;
        if (typeof val !== 'undefined') {
            stat = val;
        }
        else {
            stat = '';
        }
        window.location.href = './corpreport.php?per='+stat;
        return true;
    });
});
</script>

很好。所以我添加了一个下拉菜单，并添加了一些代码，如下所示:

<select name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
    <option value=""></option>
    <option value="Pie">Pie</option>
    <option value="Line">Line</option>
    <option value="Bar">Bar</option>
    <option value="Column">Column</option>
</select>

这是jquery

<script>
$(function(){
    $("[name=selecttype]").change(function(){
        var val = $(this).val();
        var stat;
        if (typeof val !== 'undefined') {
            stat = val;
        }
        else {
            stat = '';
        }
        window.location.href = './corpreport.php?per=<?php echo $_GET['per']; ?>&type='+stat;
        return true;
    });
});
</script>

如果选择annual and Pie，将生成localhost/folder1/file.php?per=1&type=Pie。

但是当我将periode更改为Quarterly时，则链接更改为localhost/folder1/file.php?per=4。

我该怎么做才能使链接localhost/folder1/file.php?per=4&type=Pie ?

您可以使用以下jQuery:

$(function () {
    $("[name=selectperiode]").change(function () {
        window.location.href = period(this) + type($("[name=selecttype]"));
        return true;
    });
    $("[name=selecttype]").change(function () {
        window.location.href = period($("[name=selectperiode]")) + type(this);
        return true;
    });
    function period(element) {
        var val = $(element).val();
        var stat;
        if (typeof val !== 'undefined') {
            stat = val;
        } else {
            stat = '';
        }
        return './corpreport.php?per=' + stat;
    }
    function type(element) {
        var val = $(element).val();
        var stat;
        if (typeof val !== 'undefined') {
            stat = val;
        } else {
            stat = '';
        }
        return '&type=' + stat;
    }
});

使用PHP/HTML:

<?php
    $per = (!empty($_GET["per"])) ? $_GET["per"] : '';
    $type = (!empty($_GET["type"])) ? $_GET["type"] : '';
?>
<select name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
    <option value=""></option>
    <option value="1" <?php if($per == "1"){echo "selected";} ?>>Yearly</option>
    <option value="4" <?php if($per == "4"){echo "selected";} ?>>Quarterly</option>
</select>
<select name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
    <option value=""></option>
    <option value="Pie" <?php if($type == "Pie"){echo "selected";} ?>>Pie</option>
    <option value="Line" <?php if($type == "Line"){echo "selected";} ?>>Line</option>
    <option value="Bar" <?php if($type == "Bar"){echo "selected";} ?>>Bar</option>
    <option value="Column" <?php if($type == "Column"){echo "selected";} ?>>Column</option>
</select>

为select分配id，例如period, type。获取change事件上selects的值来生成url。

<select id="period" name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
   <option value=""></option>
   <option value="1">Yearly</option>
   <option value="4">Quarterly</option>
</select>

<select id="type"  name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
        <option value=""></option>
        <option value="Pie">Pie</option>
        <option value="Line">Line</option>
        <option value="Bar">Bar</option>
        <option value="Column">Column</option>
</select>

Javascript

$("[name=selecttype]").change(function(){ var period = document.getElementById('period').value; var type = document.getElementById('type').value; window.location.href = './corpreport.php?per=' + period + '&type='+type; return true; });

<select id="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode"> <option value=""></option> <option value="1">Yearly</option> <option value="4">Quarterly</option> </select> <select id="selecttype" name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type"> <option value=""></option> <option value="Pie">Pie</option> <option value="Line">Line</option> <option value="Bar">Bar</option> <option value="Column">Column</option> </select> Jquery $(document).ready(function () { $("#selecttype").change(function () { var period = $("#selectperiode").val(); var type = $("#selecttype").val(); window.location.href = './corpreport.php?per=' + period + '&type=' + type; return true; }); });