선택한 플러그인 DropDownList가 업데이트되지 않습니다.

Question

Chosen DDL Plug-in을 사용하고 선택한 다른 항목을 기반으로 DDL을 만듭니다.

첫 번째 DDL은로드 할 때 사용자가 선택할 수있는 항목 목록으로 채워집니다. 사용자가이 목록에서 항목을 선택하면 해당 항목 유형을 선택하는 두 번째 DDL을 표시합니다. 그런 다음 세 번째 DDL을 채 웁니다. 이 세 번째 DDL은 Chosen 업데이트를 수행하지 않습니다.

<table style="width: 100%;"> 
    <tbody> 
     <tr style=""> 
      <td style="width: 33%;"> 
       <select id="ddlOne"> 
        <option value="placeholder">-- Select --</option> 
        @for (int n = 0; n < Model.Count; n++) 
        { 
         <option value="@Model[n]">@Model[n]</option> 
        } 
       </select> 
      </td> 
      <td style="width: 33%; display:none;" id="tdDbItemType"> 
       <select id="ddlItemtype"> 
        <option value="placeholder">-- Select --</option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
       </select> 
      </td> 
      <td style="width: 33%; display:none;" id="tdDbItemName"> 
       <select id="ddlItemName" style="width:33%;"></select> 
      </td> 
     </tr> 
    </tbody> 
</table> 

I는 다음과 같이 이러한 Chosen DDL 년대를 만들 :

$('#ddlItemtype').chosen({ 
    no_results_text: "Oops, nothing was found!", 
    width: "95%", 
    search_contains: true // allows for a user to do a contains search 
}); 

$('#ddlOne').chosen({ 
    no_results_text: "Oops, nothing was found!", 
    width: "95%", 
    search_contains: true // allows for a user to do a contains search 
}); 

$('#ddlItemName').chosen({ // if I remove this, I can use the originally select, without utilizing the Chosen features/styling 
    no_results_text: "Oops, nothing was found!", 
    width: "95%", 
    search_contains: true // allows for a user to do a contains search 
}); 

이를 변경 이벤트에 스크립트

에서 chosen.change() 섹션 위에있는 다음과 같이

select 항목

은 나는 이렇게한다 :

$('#ddlItemtype').chosen().change(function() { 
    $('.waiting').show(); // spinning wheel gif 
    var objSelectedItemType = $('#ddlItemtype').find('option:selected'); 
    var sSelectedItemType = objSelectedItemType[0].innerText; 
    sItemType = sSelectedItemType; 
    LoadItemList(sSelectedItemType); 
    $('.waiting').hide(); 
    //$('#ddlItemName').chosen().trigger('chosen:updated'); // $(...).chosen is not a function 
}); 

내부

$.ajax({ 
     type: "GET", 
     url: "/Database/GetDatabaseItemList/", 
     data: { "": id }, 
     success: function (response) { 
      var sHtml = ''; 
      $('#ddlDatabaseItemName').empty(); 
      sHtml = '<option value="placeholder">' + '-- Select Item --' + '</option>'; 
      try { 
       for (var n = 0; n < response.length; n++) { 
        sHtml += '<option value="' + response[n] + '">' + response[n] + '</option>'; 
       } 
       $('#ddlItemName').html(sHtml); 
       $('#tdDbItemName').show(); 
      } 
      catch (e) { 
       alert("Error in the ajax: " + e); 
       return false; 
      } 
      finally { 
       $('#ddlItemName').trigger('chosen:updated'); 
       console.log('LoadItemList worked well'); 
      } 
     } 
    }); 

내가 원래 select 항목이 AJAX 호출 후 옵션은 select 항목에 추가되었습니다하지만 난 Chosen DDL을 업데이트 할 수 없습니다입니다 검사 LoadItemList().

이 모든 것은 내가 jQuery 3.2.1을 사용하고 있는데 내가 Chosen 모두 1.8.2 및 1.7.0 버전을 시도한 $(document).ready();

의 외부에 존재한다.

편집 : HTML 태그와 AJAX 전화

EDIT2를 트리거 chosen().change()을 추가 : 최종 대답은 내 _Layout,cshmtl 페이지에 jQuery를 또 다른 참조되는이 아래 마스터 요다의 대답의 콤보이었다. 일단 Master Yoda의 접근 방식을 구현하고이 마지막 jQuery 참조를 제거하면 멋지게 작업하기 시작했습니다.

Answer 1

오류는 AJAX 요청의 콜백 내에서 발생 될 수 있습니다

$('#ddlItemtype').chosen({ 
 
    no_results_text: "Oops, nothing was found!", 
 
    width: "95%", 
 
    search_contains: true // allows for a user to do a contains search 
 
}); 
 

 
$('#ddlOne').chosen({ 
 
    no_results_text: "Oops, nothing was found!", 
 
    width: "95%", 
 
    search_contains: true // allows for a user to do a contains search 
 
}); 
 

 
$('#ddlItemName').chosen({ 
 
    no_results_text: "Oops, nothing was found!", 
 
    width: "95%", 
 
    search_contains: true // allows for a user to do a contains search 
 
}); 
 

 
$('#ddlItemtype').chosen().change(function() { 
 
    $('.waiting').show(); // spinning wheel gif 
 
    var objSelectedItemType = $('#ddlItemtype').find('option:selected'); 
 
    var sSelectedItemType = objSelectedItemType[0].innerText; 
 
    sItemType = sSelectedItemType; 
 
    LoadItemList(sSelectedItemType); 
 
    $('.waiting').hide(); 
 
}); 
 

 
//used in place of your AJAX call 
 
function LoadItemList(id) 
 
{ 
 
    $.ajax({ 
 
     type: "GET", 
 
     url: "/Database/GetDatabaseItemList/", 
 
     data: { "": id }, 
 
     success: function (response) 
 
     { 
 
      //this will obviously fail here 
 
      //added logic to error method instead 
 
     }, 
 
     error: function(response) 
 
     { 
 
      try 
 
      { 
 
       //use empty instead of .html('') 
 
       $('#ddlItemName').empty(); 
 

 
       //build up your list of items 
 
       for (var n = 1; n <= 10; n++) 
 
       { 
 
       $('#ddlItemName').append('<option> item name ' + n + '</option'); 
 
       }       
 
       //call this in your success callback method 
 
       $("#ddlItemName").chosen().trigger("chosen:updated"); 
 
       } 
 
      catch (err) 
 
      { 
 
       alert("error caught"); 
 
      } 
 
     } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" rel="stylesheet" /> 
 

 
<table style="width: 100%;"> 
 
    <tbody> 
 
    <tr style=""> 
 
     <td style="width: 33%;"> 
 
     <select id="ddlOne"> 
 
      <option value="placeholder">--Select --</option> 
 
     </select> 
 
     </td> 
 
     <td style="width: 33%;" id="tdDbItemType"> 
 
     <select id="ddlItemtype"> 
 
      <option value="placeholder">-- Select --</option> 
 
      <option value="1">1</option> 
 
      <option value="2">2</option> 
 
      <option value="3">3</option> 
 
      <option value="4">4</option> 
 
      <option value="5">5</option> 
 
     </select> 
 
     </td> 
 
     <td style="width: 33%;" id="tdDbItemName"> 
 
     <select id="ddlItemName" style="width:33%;"></select> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>