Question

我有一个select元素，其中的选项值包含一些数字（某些id＆＃39; s）。

<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值。我创建了代码，但问题是每次更改选择选项时它都会附加?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。如何清除＆＃39;更改之前的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的网址，就像这样

$('#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);
    });
});

Example

Answer 4

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

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

当href存在时，此代码实际上会分割?id=并仅为您提供之前的部分。当没有?id=而不是正常的href时，您只需将?id=和$( this ).val()添加到href即可。（它已经在我写的代码中了）

就是这样。没有RegEx，Wordarounds或更多代码行。

Answer 5

$target = $(".target");

$button = $(".button");

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

Answer 6

检查一下 Demo

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

替换选择更改时的href

6 个答案: