관련 드롭 다운 메뉴 문제

Question

2 개의 드롭 다운 상자에서 작동하는 jquery 비트를 연마 중입니다. 기본적으로 첫 번째 드롭 다운이 변경되면 적용 가능한 선택 사항 만 표시되도록 두 번째 드롭 다운을 필터링합니다. 첫 번째 드롭 다운에서 첫 번째 선택 사항 (값 : "none |")을 선택하면 두 번째 선택 항목이 표시되지 않습니다.

대단히 효과적입니다. 문제는 다음과 같습니다. 첫 번째 드롭 다운에서 첫 번째 선택 사항을 선택하면 두 번째 드롭 다운이 지워집니다. 그러나 첫 번째 드롭 다운에서 다른 옵션을 선택하면 두 번째 옵션은 비어있을 때 비어 있습니다.

내가 알아낼 수 있도록 도와 주시면 감사하겠습니다. 여기에서 드롭 다운 상자를 찾을 수 있습니다 : http://goinspire.com/jwrp-hotel-registration/.

추신 : 나는 차이가 있지만 (생각하지 않는다), WordPress 사이트이며 양식은 GravityForms에 의해 생성됩니다.

PS : 내가 제대로 이해 한 경우

tripFilter = function() { 

     var tripClass = '.hotel-trip select', 
      hotelClass = '.hotel-name select', 
      unusedClass = '.unused-options select'; 
     jQuery(tripClass).change(function(){ 
      //testFunc(); 

      var tripSelect = jQuery(tripClass), 
       trip = tripSelect.val(), 
       hotelSelect = tripSelect.parents('form').find(hotelClass); 
      if (trip === "none|"){ 
       jQuery(hotelClass+" > option").each(function() { 
        jQuery(this).clone().appendTo(unusedClass); 
        jQuery(this).remove(); 
       }); 
      } else { 
       tripnum = trip.match(/JWRP (\d*)/)[1]; 

       //var hotelChoices = []; 
       jQuery(unusedClass+" > option").each(function() { 
         jQuery(this).clone().appendTo(hotelClass); 
         jQuery(this).remove(); 
       }); 
       jQuery(hotelClass+" > option").each(function() { 
        hotelMatch = jQuery(this).val().match(/(\d*) /); 
        //console.log(hotelMatch); 
        if (hotelMatch === null || hotelMatch[1] != tripnum){ 
         jQuery(this).clone().appendTo(unusedClass); 
         jQuery(this).remove(); 
         //console.log("not a match!"); 
        }; 
       }); 

      } 

    }); 
}; 




jQuery(document).ready(function() { 
    tripFilter(); 
}); 
jQuery(document).bind('gform_post_render', function(event, form_id){ 
    if(form_id == 38) { 
     tripFilter(); 
    } 
}); 

Answer 1

가 먼저 dropdowm 두 번째 안내 : 여기에 코드입니다. 그래서 첫 번째 입력의 값이 변경 될 때마다 함수를 수행하기 위해 첫 번째 드롭 다운의 "change"이벤트에 리스너를 추가하는 것이 좋습니다.

이 방법을 시도해보십시오

$(document).ready(function(){ 
    $('#38').bind('change', tripFilter) 
});