Javascript 变量在撇号后被 chop

Question

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

我添加了一个替换规则来尝试用非空格替换所有撇号，但没有成功。我无法通过使用十六进制代码来避免这个问题，因为 Javascript 直接从 HTML 下拉列表中读取文本。

示例:如果用户在下拉列表中选择“Belgium”和“Braine-l'Allerud”，则 javascript 应创建一个变量“Cities-belgium-brainellerud.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');
    });

下拉列表是动态的；第二个下拉列表(城市)取决于用户在第一个下拉列表(国家/地区)中选择的内容。

最后，下拉列表在HTML中的写法如下:

<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>

提前致谢。

Answer 1

好吧，问题出在选项的动态构造上。您已按以下方式组织撇号:

 $jsontwo.append("<option value='"+value+"'>" + value + "</option>");

因此，单引号将该字符串的“值”部分中的城市名称括起来，因此该字符串在遇到的第一个单撇号处被 chop 。基本上它在构造时看起来像这样:

<option value='Braine-l'Alleud'>Braine-l'Alleud</option>

您需要对字符串的该部分使用双引号:

 $jsontwo.append('<option value="'+value+'">' + value + "</option>");

这将解决问题并为您提供以下信息:

 <option value="Braine-l'Alleud">Braine-l'Alleud</option>