如何從用戶選擇的動態下拉列表中生成動態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) 
});