Question

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

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

示例：如果用户在下拉列表中选择“Belgium”和“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');
    });

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

最后，下拉列表在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>");

因此，单引号围绕“＆＃39;值”中的城市名称。这个字符串的一部分，因此字符串在它遇到的第一个单个撇号处被截断。基本上它构造时看起来像这样：

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

Answer 2

我不确定你为什么以你的方式生成链接但是如果你将jQuery中的代码替换为javascript，它应该能够读取文本。

如下所示：

var var1 = document.getElementById("json-one").innerText;
var var2 = document.getElementById("json-two").innerText;

我将html放在div中，如下所示：

<div id="json-one">Hirschegg,Salzburg,Bergheim,Wien</div>
<div id="json-two">Antwerpen,Braine-l'Alleud,Brugge</div>

OR

将.val（）替换为.html（），如下所示：

var var1 = $('#json-one').html();
var var2 = $('#json-two').html();

看看它是否有帮助！

撇号

2 个答案: