替换选择更改时的href

Question

我有一个select元素，其中的选项值为某些数字（某些id）。

<select id="select">
    <option value="21">Random<option>
    <option value="23">Random 2<option>
    <option value="25">Random 3<option>
    <option value="27">Random 4<option>
</select>

它旁边是一个提交按钮，它将执行某种提交。

<a class="button" href="www.random.org">Click me!</a>

我需要将?id=添加到该链接，并使用select的id值。 我创建了代码，但问题是它只是在每次更改select选项时附加?id=

var id;
$('#select').on('change', function(){
    id = $(this).val();
    var new_href = $('.button').attr('href') + '?id=' + id;
    $('.button').attr('href', new_href);
});

因此，当我点击第一个选项时，我得到了href

www.random.org?id=21

但是，如果我点击第二个（或任何相关的）我得到

www.random.org?id=21?id=23

它附加了id。 如何“清除”以前的更改ID，并替换为所选的？ 我究竟做错了什么？

Answer 1

这应该工作。

var id;
var original_link = "www.random.org";
$('#select').on('change', function(){
    $('.button').attr('href', original_link);
    id = $(this).val();
    var new_href = $('.button').attr('href') + '?id=' + id;
    $('.button').attr('href', new_href);
});

Answer 2

你可以试试这个改变按钮链接

<a class="button" href="www.random.org" data-link="www.random.org">Click me!</a>

并改变这样的JavaScript

var id;
$('#select').on('change', function(){
    id = $(this).val();
    var new_href = $('.button').data('link') + '?id=' + id;
    $('.button').attr('href', new_href);
});

我认为这对你很有帮助。

Answer 3

你可以传递.attr函数作为第二个参数，你可以在其中替换.button url，就像这样

$('#select').on('change', function(){
    var id   = $(this).val();

    $('.button').attr('href', function (index, value) {
        // if there is id in url - replace it, else add id to url
        return /\?id=/.test(value) ? value.replace(/id=(\d+)/, 'id=' + id) : (value + '?id=' + id);
    });
});

例

Answer 4

尊重所有其他答案，我更喜欢少量的代码：

$('#select').on('change', function(){
    $( '.button' ).attr( 'href', $( '.button' ).attr( 'href' ).split( '?id=' )[0] + '?id=' + $( this ).val() );
});

当?id=存在时，此代码实际上会拆分href ，并且只为您提供之前的部分。 当没有?id=比你获得正常的href时，你只需$( this ).val() ?id=和$( this ).val()到href。 （它已经在我写的代码中了）

而已。 没有RegEx，Wordarounds或更多代码行。

Answer 5

$target = $(".target");

$button = $(".button");

使用jQuery你可以$target.attr('href', $button.data('href-url') + '?id=' + id))

Answer 6

检查这个演示

$('#select').on('change', function() {
    var aLink = $('.button'),
        selVal = $(this).val(),
        staticLink = "www.random.org";
        //alert(selVal)
    $(aLink).attr('href', staticLink + "?id=" + selVal);    
})