Question

我有两个选择框，一个用于城市，另一个用于颜色。我想要实现的是当您从任何下拉列表中选择任何选项时，它会重定向到网址http://domain.com/?city=CITY&color=COLOR

起初我正在使用这种方法：

<script type="text/javascript">
    function change_url(val) {
        window.location=val;
    }
</script>            
<select id="city" onchange="change_url(this.value);">
   <option value="http://domain.com/?city=newyork">New York</option>
   <option value="http://domain.com/?city=paris">Paris</option>
</select>

如果我只有一个选择框，这种方法很有效，但在这种情况下，我想将多个选择框值传递给url，我想要使用提交按钮！

我该如何更改此代码？

<select id="city">
   <option value="newyork">New York</option>
   <option value="paris">Paris</option>
</select>

<select id="color">
   <option value="blue">Blue</option>
   <option value="red">Red</option>
</select>

Answer 1

尝试FIDDLE

javacript

function change_url(city,color) {
        var baseURL = 'http://domain.com/?city=' + city + '&color=' + color;
        window.location=baseURL;
        //alert(baseURL);
}

$(function(){
        $('#city, #color').change(function(){ // attaching a handler to city and color dropdown list on Change
             change_url($('#city').val(),$('#color').val());
        });
});

<强> HTML

<select id="city">
   <option value="newyork">New York</option>
   <option value="paris">Paris</option>
</select>

<select id="color">
   <option value="blue">Blue</option>
   <option value="red">Red</option>
</select>

希望这适合你

Answer 2

<script type="text/javascript">
    function change_url(val) {
        //you can use document.getElementById instead of jquery's api
        var url = "";
        var color = $("#city").value();   
        url += ("city=" + val + "&color=" + color)
        window.location=url;
    }
</script>            
<select id="city" onchange="change_url(this.value);">
   <option value="http://domain.com/?city=newyork">New York</option>
   <option value="http://domain.com/?city=paris">Paris</option>
</select>

<select id="color">
   <option value="blue">Blue</option>
   <option value="red">Red</option>
</select>

多个选择url参数重定向

2 个答案: