如何从用户选择的动态下拉列表中生成动态URL？

Question

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

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

例如，是用户选择“挪威”，“奥斯陆”和“全明星”，提交按钮应该开拓“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格式... 是否有可能以某种价值属性添加到每个条目，该条目可用于创建网址是什么？

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

Answer 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) 
});