Question

我想在一个页面中显示5个url链接，我想要一个包含3个选择字段的表单，这些字段将根据他们的选择更改url参数。

例如：

SELECT color: red / blue / green
SELECT size: small / medium / large
SELECT condition: new / used

因此，用户指定3个选择字段的值。

下面选择，我将有5个不同的URL链接，它们将从选择字段中获取参数。

示例：

http://link-1.com/?color=xxx&size=yyy&condition=zzz
http://link-2.com/?color=xxx&size=yyy&condition=zzz
http://link-3.com/?color=xxx&size=yyy&condition=zzz
http://link-4.com/?color=xxx&size=yyy&condition=zzz
http://link-5.com/?color=xxx&size=yyy&condition=zzz

我需要在用户选择字段值时自动更改网址链接。 xxx / yyy / zzz将被修改为获取字段值，因此在用户选择每个选项后，参数会立即更改，例如，如果用户选择“red / large / new”，则网址必须为：

http://link-1.com/?color=red&size=large&condition=new
http://link-2.com/?color=red&size=large&condition=new
http://link-3.com/?color=red&size=large&condition=new
http://link-4.com/?color=red&size=large&condition=new
http://link-5.com/?color=red&size=large&condition=new

因此，可以根据用户的选择点击链接。

怎么做？

Answer 1

您可以使用Javascript + jQuery

<select name="color" class="color">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
</select>
<select name="size" class="size">
    <option value="small">small</option>
    <option value="medium">medium</option>
    <option value="large">large</option>
</select>

<select name="condition" class="condition">
    <option value="new">New</option>
    <option value="used">Used</option>
</select>

<a href="#" class="link1">Link 1</a>
<a href="#" class="link2">Link 2</a>
<a href="#" class="link3">Link 3</a>

<script>
    $(function() {
        $('#´.color, .size, .condition').change(function() { 
            var color = $('.color').val();
            var size = $('.size').val();
            var condition = $('.condition').val();

            var link1 = 'http://link-1.com/?color=' + color + '&size=' + size + '&condition=' + condition;
            var link2 = 'http://link-2.com/?color=' + color + '&size=' + size + '&condition=' + condition;
            var link3 = 'http://link-3.com/?color=' + color + '&size=' + size + '&condition=' + condition;

            $('.link1').attr('href', link1);
            $('.link2').attr('href', link2);
            $('.link3').attr('href', link3);
        });
    });
</script>

未经测试，但应该可以使用。

选择表单更改时更改链接参数

1 个答案: