Question

我正在尝试通过从下拉框中插入值来更改一系列链接。我发现这很直接用PHP（下面的代码），但我希望能够更改链接，而不是1）页面刷新（这些链接在主页的底部附近）和2）没有提交按钮如果可能的话。

这是php代码：

<form name="test" action="<?php echo 
htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<select name="county" id="select13">
    <option value="All">All</option>
    <option value="County1">County1</option>
    <option value="County_2">County 2</option>
    ...
</select>
<input type="submit" name="submit" value="Set County">
</form>
<?php
if(isset($_POST['submit']))
{
$county = $_POST['county'];
$www = "http://www.website.com/";
$food = "/topics/Food/programs.aspx";
$meals = "/topics/Meals/programs.aspx";
....
echo "<a href=$www/$county/$food>Food</a><br>";
echo "<a href=$www/$county/$meals>Meals</a><br>";

上面的代码工作正常，但需要刷新页面。我试图使用jquery来获取链接列表，例如：

<a href="http://www.website.com/topics/county/Food/programs.aspx">Food</a>

只需将“county”替换为下拉框中的值即可。

function changelinks(){
  var countyvals = $("#county").val();
$("a[href^='http://www.webpage.com/topics/']")
  .each(function(){
this.href = this.href.replace(/^http:\/\/www\.webpage\.com\/topics\//,"http://www.webpage.com/topics/"+countyvals);
});}

上面的代码可以正常更改链接一次，但在链接更改后我无法再定位链接。我今天刚开始自学jquery，所以我不知道在哪里寻找更好的解决方案。

更改这些链接的最佳方法是什么？我应该在php代码上尝试一些ajax，还是通过jquery有更好/更简单的解决方案？

谢谢！

Answer 1

我会使用HTML 5 data attributes。在每个感兴趣的锚点上都有data-relativeurl属性，然后您可以使用

function changelinks(){
  var countyvals = $("#selector13").val();
$("a[href^='http://www.webpage.com/topics/']")
  .each(function(){
this.href = "http://www.webpage.com/" + countyvals + $(this).attr('data-relativeurl');
});}

使用下拉列表中的值更改链接URL

1 个答案: