替換href在選擇變化

我有一個選擇元素的值與某些數字（某些id）的選項。替換href在選擇變化

<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=添加到鏈接，與價值選擇的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。如何在變更時「清除」以前的ID，並用選定的ID替換？我究竟做錯了什麼？

來源

2015-04-15 dingo_d

對錨標籤的數據屬性。不要從'href'屬性讀取URI，而是從data-attribute中讀取。 –

您可以將原始的href保存爲一個單獨的屬性，例如'data-href-orig =「www.random.org」'然後像這樣設置href'$（'。button'）。attr（'href'，$（'。button'）。data（'href- orig'）+'？id ='+ id）;'。 –

請記住，如果沒有協議（http | https），它將很可能被視爲相對URI並可能無法正常運行。 – EternalHour

這應該工作。

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); 
});

來源

2015-04-15 07:21:12 Alexey

我正在嘗試它，但現在我的ID不起作用。我會看一下，看看問題，但這似乎應該起作用，所以稍後我會接受答案。 –

你可以嘗試這樣的改變按鈕鏈接

<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); 
});

我認爲這是對您有所幫助。

來源

2015-04-15 07:24:10

$target = $(".target"); 

$button = $(".button");

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

來源

2015-04-15 07:24:21

可以傳遞到.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

來源

2015-04-15 07:29:28

尊重每其他答案，我寧願少量的代碼：

$('#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或更多行代碼。

來源

2015-04-15 07:31:52

入住這 Demo

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

來源

2015-04-15 08:35:39 stanze

替換href在選擇變化

回答

相關問題