사용자가 선택한 동적 드롭 다운 목록에서 어떻게 동적 URL을 생성합니까?

Question

JSON을 사용하여 두 개의 목록으로 구성된 동적 드롭 다운 목록을 만듭니다. 또한 동적 인 세 번째 드롭 다운 목록이 있습니다.

사용자가 제출 버튼을 클릭하면 세 개의 드롭 다운 목록에서 선택한 값을 기반으로 동적으로 생성 된 URL이 트리거됩니다.

예를 들어

, 사용자는 "노르웨이", "오슬로"와 "모든 별", "norway_oslo_allstars.html"목록 드롭 다운의

두를 열어야합니다 제출 버튼을 클릭합니다 (선택이다 첫 번째와 세 번째)에는 OPTION 태그에 VALUE 속성이 있습니다. 두 번째 드롭 다운 목록은 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 서식 ... 는 URL을 만드는 데 사용할 수있는 각 항목에 VALUE 속성의 어떤 종류를 추가 할 수 있습니까?

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

Answer 1

json-two

당신은 간단하게 다음과 같이 모든 vals 반복되는 경우 귀하의 JS 코드를 변경해야 당신이 당신의 두 번째 옵션에 VALUE을 추가 할 수 있습니다 먼저.

$.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) 
});