개체의 이름을 지정하여 드롭 다운을 만듭니다.

Question

상태 이름이 속성으로 포함 된 개체에서 50 개 상태 중 드롭 다운을 만들려고합니다. 아래 예 :

window.LGMaps.maps.usa = { 
    "paths": [ 
     { 
      "enable": true, 
      "name": "Alabama", 
      "abbreviation": "AL", 
      "textX": 657, 
      "textY": 405, 
      "color": "#5b9fbb", 
      "hoverColor": "#12407e", 
      "selectedColor": "#d12229", 
      "url": "http://www.uskoreacouncil.org/", 
      "text": "<h1>Alabama</h1><br /><h3>Goods Exported to Korea</h3><li>Top Category: Motor Vehicles</li> <li>Total Exports: 526,379,126</li> <h3>Services Exported to Korea</h3> <li>Top Category: Travel</li><li>Total Exports: 165,827,003</li><h3>Jobs Tied to Goods/Services</h3><li>Goods Related: 2,455</li><li>Services Related: 1,363</li>", 
      "path": "M 631.30647,460.41572 L 629.81587,446.09422 L 627.06763,427.34158 L 627.22929,413.27709 L 628.03759,382.23824 L 627.87593,365.58718 L 628.04102,359.16812 L 672.5255,355.54867 L 672.3777,357.73109 L 672.53936,359.83269 L 673.18601,363.22756 L 676.58089,371.14893 L 679.00579,381.01024 L 680.46074,387.15335 L 682.07734,392.00317 L 683.5323,398.95458 L 685.63388,405.25934 L 688.22045,408.65423 L 688.70543,412.04909 L 690.64537,412.8574 L 690.80703,414.95899 L 689.02875,419.80881 L 688.54377,423.04203 L 688.38211,424.98195 L 689.99873,429.3468 L 690.32205,434.68159 L 689.51373,437.10651 L 690.16039,437.91481 L 691.61533,438.72311 L 691.94347,441.61193 L 686.34581,441.25838 L 679.55606,441.90503 L 654.01366,444.81491 L 643.6021,446.22168 L 643.38072,449.09908 L 645.15899,450.87735 L 647.74556,452.81727 L 648.32642,460.75271 L 642.78436,463.32561 L 640.03614,463.00229 L 642.78436,461.06236 L 642.78436,460.0924 L 639.71282,454.11096 L 637.44957,453.46432 L 635.99462,457.82915 L 634.70134,460.57738 L 634.0547,460.41572 L 631.30647,460.41572 z" 
     }, 

나는 .each()의 jQuery 방법으로이 작업을 수행하려고 시도했지만, 난이 상태가 드롭 다운 메뉴에서 채우기 위해 고군분투하고있다.

<div class="container"> 
    <div> 
     <select> 
     <option>Select a State</option> 
     <option class="state"> </option> 
     <select> 
    </div> 

function list_states(){ 
    var states = window.LGMaps.maps.usa.paths.name; 
    $(".container .dropdown").text(states).each(); 
}; 

모든 주를 가져와 내 드롭 다운에서 반복하는 방법을 알아 내려고합니다.

Answer 1

몇 가지 참고 사항 :

귀하의 예제에서

• 는 window.LGMaps.maps.usa는 "우리가" 사용할 수 중첩 된 객체 구조를 가지고 있지 않는 한, 오류가 발생합니다;
.each()
• 및 jQuery를에 $.each() 원하는 jQuery를 개체의 컬렉션을 통해 그 $(selector).each() 반복에 매우 다르며, $.each()는 일반 반복자 기능이기 때문에 어쩌면 당신은, 이 당신을 위해 작동해야 할 경우. 에는이 없으므로 jQuery를 사용하여 객체/배열을 반복 할 수 있습니다. 특히 for 루프를 사용하면 속성에 액세스 할 때 프로토 타입 체인에서 정크를 버릴 수도 있습니다 (특히 name). jQuery를 사용하는 것은 꽤 괜찮습니다.

  질문에 jQuery를 당신의 사용은 당신이 너무 익숙하지 않은 제안 때문에

window.states = { 
 
    paths: [{ name: "Alabama" }, { name: "Arkansas" }] 
 
}; 
 

 
function list_states() { 
 
    var states = window.states; 
 
    $.each(states.paths, function(index, state){ 
 
    $('.container select').append('<option>' + state.name + '</option>'); 
 
    }); 
 
}; 
 

 
list_states();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div> 
 
    <select> 
 
     <option>Select a State</option> 
 
     </select> 
 
    </div>

, 내가 그렇게 아마, 계몽보다 더 당황 당신을 떠나 답을 제공하지 않습니다 내가 제안하는 유일한 "개선"은 window에 할당하는 것을 피하고 그 작은 함수를 명시 적으로 호출하지 않는 것입니다.

$(function() { 
    // this function executes as soon as the DOM is ready; it has the same effect as $(document).ready(function() {...}); 

    // this variable is not visible outside of the closure, i.e. it is not assigned to the global window object 
    var states = { paths: [{ name: "Alabama" }, { name: "Arkansas" }] }; 

    $.each(states.paths, function(index, state) { 
    $(".container select").append("<option>" + state.name + "</option>"); 
    }); 
});