jquery - 每次更改选择框时如何获取更改的值？

Question

脚本的工作原理:运行此脚本时，它会从选择框 (#artist) 中的选项中获取 id#(示例 123)，并将该数字放在具有 updategallerylink 类的基本链接的末尾。所以我最终得到了这样的链接:domain.com/artist/123/)

问题是，如果我选择选项 1 (123)，然后选择选项 2 (234)，它实际上会吐出一个链接，上面写着“domain.com/artist/123/234/”，而它本应该吐出“domain.com”/艺术家/234/。

我不希望它堆叠#artist 中的变量，而是在每次选择不同选项时将其替换为正确的 id#。

<script type="text/javascript">
$(function()  {

  $('.updategallerylink').click(function()  {
    var searchString = $('#artist').val();
    var searchLink = $(this).attr('href');
    $(this).attr('href', searchLink+searchString+'/');
  });

});
</script>

<select name="artist" id="artist" style="width: 200px; background: black;" class="required">
            <option value="123">Artist 1</option>
            <option value="234">Artist 2</option>
        </select>
<a href="/artist/" id="gallerylink" class="updategallerylink" title="Artwork Gallery" target="_blank">gallery</a>

Answer 1

您可以将原始 href 作为数据，然后仅将艺术家附加到原始 href，如下所示:

<script type="text/javascript">
$(function()  {

  $('.updategallerylink').click(function()  {
    if(!$(this).data('orig-href')) {
        // Store the original href
        $(this).data('orig-href', $(this).attr('href'));
    }

    var searchString = $('#artist').val();
    var searchLink = $(this).data('orig-href');
    $(this).attr('href', searchLink + searchString + '/');
  });

});
</script>

演示:http://jsbin.com/gigami/4/