选择选项和弹出框 - 始终获取最后选择的值

Question

这是我的代码选择选项和使用 html 和 jquery 的弹出框

问题：当我选择一个选项时，它可以工作，但是当我选择另一个选项时，它总是获得最后选择的值。

前任。如果我选择游戏名称 4 - href 链接的值必须是 name4

https://www.mygames.com/restore/accept/'+value+

https://www.mygames.com/restore/accept/name4

但是当我选择另一个选项时，如 Name of Game 7

它将获得最后一个值，即 name4，它必须是 game7

//Selection

$('#mygame').change(function() {

  var value = $(this).find('option:selected').val();

  //Restore

  $('.restore').popover({

    trigger: 'focusin',

    html:true,

    placement:'bottom',

    title:'Restore Folder',

    content:'<a href="https://www.mygames.com/restore/accept/'+value+'" target="_blank" class ="btn btn-info btn-sm">Accept</a>&nbsp;&nbsp;<a href="https://www.mygames.com/restore/review/'+value+'"  target="_blank" class ="btn btn-primary btn-sm">Review</a>'

  });   

  //Backup

  $('.backup').popover({

    trigger: 'focusin',

    html:true,

    placement:'bottom',

    title:'Backup Folder',

    content:'<a href="https://www.mygames.com/backup/accept/'+value+'" target="_blank" class ="btn btn-info btn-sm">Accept</a>&nbsp;&nbsp;<a href="https://www.mygames.com/backup/review/'+value+'"  target="_blank" class ="btn btn-primary btn-sm">Review</a>'

  });   

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div style="padding-bottom:10px;">

  <select name="mygame" id="mygame" style="width:16em;">

    <option value="choose">-- Choose Game --</option>

    <option value="name1">Name of Game 1</option>

    <option value="name2">Name of Game 2</option>

    <option value="name3">Name of Game 3</option>

    <option value="name4">Name of Game 4</option>

    <option value="name5">Name of Game 5</option>

    <option value="name6">Name of Game 6</option>

    <option value="name7">Name of Game 7</option>

    <option value="name8">Name of Game 8</option>

  </select>

提琴手

https://jsfiddle.net/ud5Lrhwb/

Answer 1

不是每次选择更改时都初始化插件，而是使用内容函数并获取该函数中选择的值，并且只初始化插件一次$('.backup').popover({&nbsp; trigger: 'focusin',&nbsp; html: true,&nbsp; placement: 'bottom',&nbsp; title: 'Backup Folder',&nbsp; content: function() {&nbsp; &nbsp; const value = $('#mygame').val();&nbsp; &nbsp; return '<a href="https://www.mygames.com/backup/accept/' + value + '" target="_blank" class ="btn btn-info btn-sm">Accept</a>&nbsp;&nbsp;<a href="https://www.mygames.com/backup/review/' + value + '"&nbsp; target="_blank" class ="btn btn-primary btn-sm">Review</a>';&nbsp; }});$('.restore').popover({&nbsp; trigger: 'focusin',&nbsp; html: true,&nbsp; placement: 'bottom',&nbsp; title: 'Restore Folder',&nbsp; content: function() {&nbsp; &nbsp; const value = $('#mygame').val()&nbsp; &nbsp; return '<a href="https://www.mygames.com/restore/accept/' + value + '" target="_blank" class ="btn btn-info btn-sm">Accept</a>&nbsp;&nbsp;<a href="https://www.mygames.com/restore/review/' + value + '"&nbsp; target="_blank" class ="btn btn-primary btn-sm">Review</a>'&nbsp; }});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /><div style="padding-bottom:10px;">&nbsp; <select name="mygame" id="mygame" style="width:16em;">&nbsp; &nbsp; <option value="choose">-- Choose Game --</option>&nbsp; &nbsp; <option value="name1">Name of Game 1</option>&nbsp; &nbsp; <option value="name2">Name of Game 2</option>&nbsp; &nbsp; <option value="name3">Name of Game 3</option>&nbsp; &nbsp; <option value="name4">Name of Game 4</option>&nbsp; &nbsp; <option value="name5">Name of Game 5</option>&nbsp; &nbsp; <option value="name6">Name of Game 6</option>&nbsp; &nbsp; <option value="name7">Name of Game 7</option>&nbsp; &nbsp; <option value="name8">Name of Game 8</option>&nbsp; </select></div><div style="float:left;">&nbsp; <button class="restore" id="restore">Restore Folder </button>&nbsp; <button class="backup" id="backup">Backup Folder</button></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>