Seçim değişikliği sırasında href'i değiştirin

Bazı numaralar (bazı kimlikleri) olan değerli seçeneklere sahip bir seçim elemanım var.


Bunun yanında, bir tür gönderim için önceden bir şekil verebilecek bir gönder düğmesi bulunur.

Click me!

Seçtiğin id değeri ile bu bağlantıya ? İd = eklemem gerekiyor. Kodu oluşturdum, ancak sorun, seçeneği seçtiğimde her değiştirdiğimde sadece ? İd = eklemesi.

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

So when I click on first option I get, for the href

www.random.org?id=21

Ama ikincisine tıklarsam (veya bu konuda herhangi biri)

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

Kimliği ekler. Değişiklikteki önceki kimliği 'silmek' ve seçili olanla değiştirmek nasıl? Neyi yanlış yapıyorum?

4
Protokol olmadan (http | https) göreceli URI olarak değerlendirilebileceğini ve düzgün çalışmayabileceğini unutmayın.
katma yazar EternalHour, kaynak
URL PHP (wordpress) 'ten çıkarıldı, gereksiz açıklama yapmayı önlemek için sorunumu basitleştirdim :)
katma yazar dingo_d, kaynak
çapa etiketinde bir data-niteliği var. URI'yı href özniteliğinden okumak yerine data özniteliğinden okuyun.
katma yazar Ankit Saroch, kaynak
Orijinal href'i ayrı bir özelliğe, örneğin data-href-orig = "www.random.org" ve sonra href'i şu şekilde ayarlayın: $ ('. button'). attr ('href', $ ('. button' ) .data ('href-orig') + '? id =' + id); .
katma yazar Tadeáš Peták, kaynak

6 cevap

Bu çalışmalı.

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);
});
8
katma
Deniyorum, ama şimdi kimliğim çalışmıyor. Biraz bakacağım ve konuyu göreceğim ama bu işe yarayacak gibi görünüyor, bu yüzden cevabını kısa bir süre sonra kabul edeceğim.
katma yazar dingo_d, kaynak

İkinci olarak .attr işlevine geçebilirsiniz argüman, burada .button URL'sini değiştirebilirsiniz.

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

Örnek

1
katma

Diğer her cevaba saygı duymak gerekirse, az miktarda kod tercih ederim:

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

Bu kod, bir ? İd = bulunduğunda ve size bundan önce yalnızca bir parça verdiğinde href 'i böler. Normal href'e göre ? İd = olmadığında ve bundan sonra, sadece ? İd = ve $ (this) .val() href'e. (Zaten yazdığım kodda)

Bu kadar. RegEx, Geçici Çözümler veya gerekenden daha fazla kod satırı yok.

1
katma

Bu değişiklik düğmesini link gibi deneyebilirsiniz

Click me!

ve javascript'i böyle değiştir

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

Bence sana yardımcı oldu.

1
katma

Check this Demo

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

$button = $(".button");

With jQuery you can $target.attr('href', $button.data('href-url') + '?id=' + id))

0
katma