2013-06-13 2 views
1

요구 사항 : <select1>이 (자리 표시 자 텍스트 = "신규 또는 사용 차량을 선택") 옵션없이 사용할 수 <select2> (자리 표시 자 텍스트 = "제조 업체 선택")JQuery와 선택 2 아약스 체인 선택

<select1> 몇 가지 옵션이 포함되어 있습니다 사용자는 <select2> jQuery를 선택 2 플러그인

I를 활용 한

에서 결과로 채워 옵션을 선택 또한

문제 플러그인 선택 2를 사용하여 올바르게 선택 2 채우기, 체인 된 선택 작업을 가지고 블로그는 : 나는 그것 가지고 결과 나는 자리를하고자 할 때 자리 표시 자 텍스트가 "발견 5 개 결과"라고하고 싶습니다 텍스트 때 결과가 "0 결과가 없습니다"라고 말하며 현재 장애인 로 돌아갑니다에 자리 표시 자 텍스트 변경 첫번째 선택, 그것은 선택 2 자리

HTML 망쳐 놨 다시 선택시 :

//<select1> 
<select name='category_id' id='category_id'> 
<option value='1'>New</option> 
<option value='2'>Used</option> 
</select> 

//<select2> 
<select name='make_id' id='make_id'><option value=''></option></select> 

//javascript 
<script type='text/javascript'> 
    $(document).ready(function() { 
     $('#category_id').select2({ 
      placeholder: 'Select new or used Vehicles', 
      allowClear: true 
     }); 
     $('#make_id').select2({ 
      placeholder: 'Select Manufacturer', 
      allowClear: true 
     }); 

     $('#category_id').change(function() { 
      var selectedCategory = $('#category_id option:selected').val(); 
      $.ajax({ 
       type: 'POST', 
       url: 'ajax.php', 
       dataType: 'html', 
       data: { 
        a: 'dropDownsHome', 
        c: selectedCategory 
       }, 
       success: function(txt){ 
        //no action on success, its done in the next part 
       } 
      }).done(function(data){ 
       //get JSON 
       data = $.parseJSON(data); 
       //generate <options from JSON 
       var list_html = ''; 
       $.each(data, function(i, item) { 
        list_html += '<option value='+data[i].id+'>'+data[i].make+'</option>'; 
       }); 
       //replace <select2 with new options 
       $('#make_id').html(list_html); 
       //set to enabled|disabled 
       if (data.length > 1) { 
        $('#make_id').select2('enable', true); //enable form 
       }else{ 
        $('#make_id').select2('enable', false); //disable form 
       } 
       //change placeholder text 
       $('#make_id').select2({placeholder: data.length +' results'}); 
      }) 
     }); 
    }); 
</script> 
에게

// JSON 결과가 ajax.php 인 경우 (결과가 false이면 false) [{ "id": "1", "make": "Foton"}, { "id": "4" "현대"}, { "id": "5", "make": "기아"}, { "id": "2", "make": "Proton"}, { "id" "2", "make": "Proton"}, { "id": "3", "make": "Tata"}, { "id": "3", "make": "Tata"}, { "ID": "6", "확인": "도요타"}]

답변

3

플러그인을 업그레이드 시도

내가 사용하고 잘 작동하지 않도록 설정하고 또한

를 추가 3.4.0 버전으로 시도
list_html += ' <option value=""></option>'; 
/* 저작권 2012 이고르 :

코드와 함께 선 위에, 그 다음 자리는 show..I 내가이 지금 감사를하려고합니다

//generate <options from JSON 
      var list_html = ''; 
      list_html += ' <option value=""></option>'; 

      $.each(data, function(i, item) { 
       list_html += '<option value='+data[i].id+'>'+data[i].make+'</option>'; 
      }); 
      //replace <select2 with new options 
      $('#make_id').html(list_html); 
      //set to enabled|disabled 
      if (data.length > 1) { 
       $('#make_id').select2('enable', true); //enable form 
       $('#make_id').select2({placeholder: data.length +' results'}); 

      }else{ 

       $('#make_id').select2('enable', false); //disable form 
       $('#make_id').select2({placeholder: 0 +' results'}); 


      } 
+0

다음 편집 코드를 paisted 것이다 .. 나는 버전을 사용하고 있습니다 Vaynberg 버전 : 3.4.0 타임 스탬프 : Tue May 14 08:27:33 PDT 2013 – Mark

+0

감사합니다. 나는 아직도 그것이 효과가 있었던 이유를 정말로 이해하지 못한다. 그러나 최소한 나는이 프로젝트에 착수 할 수있다. .. 이런 작은 일에 많은 시간을 허리에 물렸다. Tx !! – Mark

+0

+1 체인 된 국가/상태 select2로 내 문제를 해결하십시오. 감사. –