リンクURLを値でドロップダウンリストから変更する

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> 

そして、ちょうどドロップダウンボックスから値を「郡」を交換してください。

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