撇号后可变JavaScript切断

Question

我有一个Javascript从两个HTML下拉列表中读取文本，删除所有特殊字符，然后将文本存储在变量中。下拉列表中的文本来自JSON文件。问题是，无论何时下拉列表中的文本都有撇号，JavaScript都会在撇号处剪切字符串，因此撇号后的所有文本都不包含在Javascript变量中。

我已经包含了一个替换规则来尝试用一个非空格替换所有的撇号，但没有运气。我不能通过使用HEX代码来避免这个问题，因为Javascript直接从HTML下拉列表中读取文本。

示例：如果用户在下拉列表中选择“比利时”和“Braine-l'Allerud”，则javascript应创建变量“Cities-belgium-brainelallerud.html”。相反，它将“Braine-l'Allerud”中的撇号之后的所有文本剪切掉，而是创建一个变量“Cities-belgium-brainel.html”

这里是JSON文件（下拉列表中文本的基础）：

"austria": "Hirschegg,Salzburg,Bergheim,Wien", 
"belgium": "Antwerpen,Braine-l'Alleud,Brugge" 

这里是Javascript代码：

jQuery("button[type='submit']").click(function(e) { 
    e.preventDefault() 
    var var1 = $('#json-one').val() 
    var var2 = $('#json-two').val().toLowerCase().replace(/'/g,"").replace(/[^a-zA-Z0-9_-]/g,'') 

    var link = "Cities-"+var1+"-"+var2+".html" 
    console.log(link) 
    document.location = link; 
    }); 

值提取到下拉列表中通过以下脚本的JSON：

$(document).ready(function(){ 
    $("#json-one").change(function() { 
     var $dropdown = $(this); 
      $.getJSON("../jsondata/data003.json", function(data) { 

       var key = $dropdown.val(); 
       var vals = []; 

       switch(key) { 
        case 'austria': 
         vals = data.austria.split(","); 
         break; 
        case 'belgium': 
         vals = data.belgium.split(","); 
         break; 
      } 
       var $jsontwo = $("#json-two"); 
       $jsontwo.empty(); 
       $.each(vals, function(index, value) { 
        $jsontwo.append("<option value='"+value+"'>" + value + "</option>"); 
       }); 

      }); 
     }); 
     $("#json-one").trigger('change'); 
    }); 

下拉列表是动态的;第二个下拉列表（城市）取决于用户在第一个下拉列表（国家）中选择的内容。提前

<span class="fontyellow">Country:</span> 
    <select id="json-one"> 
       <option value="austria">Austria</option> 
       <option value="belgium">Belgium</option> 
    </select> 

<span class="fontyellow">City:</span> 
    <select id="json-two"> 
    </select> 

感谢：

最后，在HTML如下下拉列表被写入。