替換選擇更改時的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);    
})