JSON 데이터를 사용하여 선택 상자의 옵션을 채우려면 어떻게 해야 합니까?

JSON 데이터를 사용하여 선택 상자의 옵션을 채우려면 어떻게 해야 합니까?

선택한 나라에 따라 도시를 먹여 살려야 해요.프로그래밍으로 했는데 어떻게 JSON 데이터를 Select Box에 넣어야 할지 모르겠어요.jQuery를 사용하여 여러 가지 방법을 시도했지만 모두 효과가 없었습니다.

수신한 응답(필요에 따라 포맷을 변경할 수 있습니다):

["<option value='Woodland Hills'>Woodland Hills<\/option>","<option value='none'>none<\/option>","<option value='Los Angeles'>Los Angeles<\/option>","<option value='Laguna Hills'>Laguna Hills<\/option>"]

그러나 이 데이터를 HTML에 옵션으로 넣는 방법은 무엇입니까?<select></select>태그?

시도했던 코드:

<form action="" method="post">
<input id="city" name="city" type="text" onkeyup="getResults(this.value)"/>
<input type="text" id="result" value=""/>
<select id="myselect" name="myselect" ><option selected="selected">blank</option></select>
</form>
</div>

<script>
function getResults(str) {
  $.ajax({
        url:'suggest.html',
        type:'POST',
        data: 'q=' + str,
        dataType: 'json',
        success: function( json ) {
            $('#myselect').append(json);

        }
    });
};

$( '.suggest' ).keyup( function() {
   getResults( $( this ).val() );
} );
</script>

jQuery와 AJAX를 사용하여 셀렉트박스를 자동 입력하는데도 이 튜토리얼을 사용하려고 했지만 튜토리얼이 제안하는 형식으로 응답을 받았음에도 불구하고 이 튜토리얼은 "UNDEFINED"로 선택을 채우는 것 외에는 아무 것도 하지 않았습니다.

<script type="text/javascript" charset="utf-8">
$(function(){
  $("select#city").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#myselect").html(options);
    })
  })
})
</script>

왜 그냥 서버가 이름을 돌려주지 않는 거죠?

["Woodland Hills", "none", "Los Angeles", "Laguna Hills"]

그런 다음,<option>컴포넌트를 사용합니다.

$.ajax({
    url:'suggest.html',
    type:'POST',
    data: 'q=' + str,
    dataType: 'json',
    success: function( json ) {
        $.each(json, function(i, value) {
            $('#myselect').append($('<option>').text(value).attr('value', value));
        });
    }
});

site.com에서 json이 반환되었습니다.

[{text:"Text1", val:"Value1"},
{text:"Text2", val:"Value2"},
{text:"Text3", val:"Value3"}]

사용방법:

    $.getJSON("your://site.com", function(json){
            $('#select').empty();
            $('#select').append($('<option>').text("Select"));
            $.each(json, function(i, obj){
                    $('#select').append($('<option>').text(obj.text).attr('value', obj.val));
            });
    });

다음과 같이 해야 합니다.

function getResults(str) {
  $.ajax({
        url:'suggest.html',
        type:'POST',
        data: 'q=' + str,
        dataType: 'json',
        success: function( json ) {
           $.each(json, function(i, optionHtml){
              $('#myselect').append(optionHtml);
           });
        }
    });
};

건배.

JQuery 뷰 엔진을 살펴보고 아래 드롭다운에 어레이를 로드합니다.

$.ajax({
    url:'suggest.html',
    type:'POST',
    data: 'q=' + str,
    dataType: 'json',
    success: function( json ) {
          // Assumption is that API returned something like:["North","West","South","East"];
          $('#myselect').view(json);
    }
});

자세한 것은, https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown 를 참조해 주세요.

제우스틀 말이 맞아요나한테도 효과가 있어.

   <select class="form-control select2" id="myselect">
                      <option disabled="disabled" selected></option>
                      <option>Male</option>
                      <option>Female</option>
                    </select>

   $.getJSON("mysite/json1.php", function(json){
        $('#myselect').empty();
        $('#myselect').append($('<option>').text("Select"));
        $.each(json, function(i, obj){

  $('#myselect').append($('<option>').text(obj.text).attr('value', obj.val));
        });
  });

이 질문이 좀 오래된 건 알지만 jQuery 템플릿과 $.ajax 콜을 사용합니다.

ASPX:
<select id="mySelect" name="mySelect>
    <option value="0">-select-</option>
</select>
<script id="mySelectTemplate" type="text/x-jquery-tmpl">
    <option value="${CityId}">${CityName}</option>
</script>

JS:
$.ajax({ 
    url: location.pathname + '/GetCities', 
    type: 'POST', 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    success: function (response) { 
        $('#mySelectTemplate').tmpl(response.d).appendTo('#mySelect'); 
    } 
});

위 외에도 템플릿에서 사용 중인 데이터 요소를 포함하는 개체 목록을 반환하는 웹 메서드(GetCities)가 필요합니다.저는 엔티티 프레임워크를 자주 사용하지만 웹 메서드는 linq를 사용하여 데이터베이스에서 값을 가져오는 관리자 클래스를 호출합니다.이렇게 하면 입력 내용을 데이터베이스에 저장할 수 있고 선택 목록을 새로 고치면 저장 성공 시 JS에서 데이터바인드를 호출하는 것만큼이나 간단합니다.

언급URL : https://stackoverflow.com/questions/5918144/how-can-i-use-json-data-to-populate-the-options-of-a-select-box