通过Dropdown更改Href中的网址

-1

我的网站上有多个下拉菜单，可通过下拉菜单更改网址。但问题是，第一个Dropdown也改变了第二个HREF的值。我怎样才能解决这个问题？随着各功能没有什么变化..通过Dropdown更改Href中的网址

$(function() { 
 
    $('.container').each(function(){ 
 
     var getUrl = $(".application :selected").val(); 
 
     $('.link_combo').attr("href", getUrl); 
 

 
     $(".application").change(function() { 
 
      console.log(this.value); 
 
      $(".link_combo").attr('href', this.value); 
 
    
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<select class="application selectpicker"> 
 
\t <option value="fileadmin/user_upload/9_downloads/KomPass-Threading_DE.pdf">Deutsch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/KomPass-Threading_GB.pdf">Englisch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/KomPass-Threading_FR.pdf">Französisch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/KomPass-Threading_IT.pdf">Italienisch</option> 
 
</select> 
 
<p><a class="link_combo" href="#" download><i class="icon-file-pdf"></i>Download als PDF</a></p> 
 
</div> 
 

 
<div class="container"> 
 
<select class="application selectpicker"> 
 
\t <option value="fileadmin/user_upload/9_downloads/SECOND_1.pdf">Deutsch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/SECOND_2.pdf">Englisch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/SECOND_3.pdf">Französisch</option> 
 
\t <option value="fileadmin/user_upload/9_downloads/SECOND_4.pdf">Italienisch</option> 
 
</select> 
 
<p><a class="link_combo" href="#" download><i class="icon-file-pdf"></i>Download als PDF</a></p> 
 
</div>

来源

2015-09-28 herrsaidy

代码

$('.link_combo')

会发现所有元素与.link_combo类。在你的代码中，有两个这个类的锚元素，所以两者都改变了。

您需要限制选择的范围，因此只能找到相关的链接，例如：

$(function() { 
    $('.container').each(function(){ 
     var container = this; 
     var getUrl = $(".application :selected", container).val(); 
     $('.link_combo', container).attr("href", getUrl); 

     $(".application", container).change(function() { 
      console.log(this.value); 
      $(".link_combo", container).attr('href', this.value); 
     }); 
    }); 
});

还有其他的方法和你原来的$(".application").change也被称为两次（我还添加了容器本以上） - 所以你可以移动的事件处理程序出了.each，例如

$(function() { 
    $('.container').each(function(){ 
     var container = this; 
     var getUrl = $(".application :selected").val(); 
     $('.link_combo', container).attr("href", getUrl); 
    }); 

    $(".application").change(function() { 
     console.log(this.value); 
     $(this) 
      .closest(".container") 
      .find(".link_combo") 
      .attr('href', this.value); 
    }); 
});

编辑：添加容器上下文的getURL线

来源

2015-09-28 11:46:13

谢谢。但是当首先加载页面时，链接是相同的。在我选择一个之后，href的值就是正确的。 – herrsaidy

那么究竟是什么问题呢？你说hrefs得到错误的值（“第一个Dropdown也改变了第二个HREF的值”），然后他们得到正确的值（“href's有正确的值”）。那么问题是什么？ –

你的剧本完美无缺！当我加载网站时，这两个链接的href获得相同的网址。但那是错误的。当我加载页面或更改下拉脚本应该做同样的事情。你只是缺少getUrl上的上下文：'var getUrl = $（“。application：selected”，container）.val（）;'http：//www.jsfiddle.net/herrsaidy/vsrkn1k0/1/ – herrsaidy

通过Dropdown更改Href中的网址

回答

相关问题