1

我正在使用 JSON 创建一个包含两个列表的动态下拉列表。另外，我还有第三个下拉列表，它不是动态的。

当用户点击提交按钮时，它应该触发一个根据三个下拉列表中的选定值动态创建的 URL。

例如，如果用户选择“Norway”、“Oslo”和“All stars”，点击提交按钮应该会打开“norway_oslo_allstars.html”

两个下拉列表（第一个和第三个）在 OPTION 标记中具有 VALUE 属性，我认为这可用于生成动态创建的 URL - 但第二个下拉列表是从 JSON 文件创建的，因此条目没有 VALUE 属性。

是否还有一种方法可以根据用户的选择动态创建 URL？

例如，请参阅http://jazzkatt.net/dynamic/。

这是我的动态下拉列表和 JSON 代码：

<script>

$(document).ready(function(){

    $("#json-one").change(function() {

        var $dropdown = $(this);

        $.getJSON("jsondata/data.json", function(data) {

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

            switch(key) {
                case 'norway':
                    vals = data.norway.split(",");
                    break;
                case 'usa':
                    vals = data.usa.split(",");
                    break;
                case 'denmark':
                    vals = data.denmark.split(",");
            }

            var $jsontwo = $("#json-two");
            $jsontwo.empty();
            $.each(vals, function(index, value) {
                $jsontwo.append("<option>" + value + "</option>");
            });

        });
    });
    $("#json-one").trigger('change');
});
</script>

这是我的 HTML，带有两个动态下拉列表和第三个（非动态）下拉列表：

<form action="" method="get" id="form1">

<select id="json-one">
    <option selected value="norway">Norway</option>
    <option value="usa">USA</option>
    <option value="denmark">Denmark</option>
</select>

<br />

<select id="json-two">

</select>

<br />

<select id="stars">
<option value="allstars">All stars</option>
<option value="onestar">One star</option>
<option value="twostars">Two stars</option>
<option value="threestars">Three stars</option>
</select>

</form>
<p>

<button type="submit" form="form1" value="Submit">Submit</button>

这是我目前使用的 JSON 格式……是否可以为每个条目添加某种 VALUE 属性，可用于创建 URL？

{
    "norway": "Oslo,Bergen,Stavanger",
    "usa": "New York,Chicago,Dallas",
    "denmark": "Copenhagen,Aalborg,Odense"
}
4

1 回答 1

1

首先，您可以添加VALUE到您的第二个选项json-two

您只需要更改循环所有内容的 JS 代码，vals如下所示。

$.each(vals, function(index, value) { $jsontwo.append("<option value='"+value+"'>" + value + "</option>"); });

其次，您不需要对脚本进行任何更改。您可以使用以下脚本生成 URL。

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

 var link = var1+"_"+var2+"_"+var3+".html"
 console.log(link)
});
于 2016-09-25T20:32:21.473 回答