선택 메뉴 표시 및 숨기기

Question

약 30 개의 옵션이있는 jQuery 선택 메뉴 위젯이 있습니다. 보다 유용하게 사용하기 위해 가장 일반적으로 선택된 15 가지 옵션 만 표시합니다. 다음으로 "더보기"라는 16 번째 옵션이 있습니다. jQuery에서 수행하고자하는 작업은 15 개의 다른 옵션 (현재 15 개 미만)을 표시하는 것입니다.

현재 15 개 이상의 버튼이 표시됩니다. 그러나 클릭하면 선택 메뉴 (팝업)가 사라집니다 ("더보기"가 선택됨). 버튼을 다시 클릭하면 모든 옵션이있는 선택 메뉴 목록이 다시 나타납니다. 그래서, 작동 중입니다. "더보기"를 클릭 한 후에 옵션 목록을 숨기는 것입니다. 목록이 사라지지 않도록하는 방법이 있습니까? 나는 event.preventDefault()을 포함 시켰지 만 그 트릭을 수행하지 않는 것 같습니다.

기본적으로 내가하고 싶은 것은 selectmenu 위젯의 옵션을 보이거나 숨기는 것입니다. 더 쉬운 일이라면 다른 방법으로 해줘서 기쁩니다!

$(document).ready(function() { 
    $('#holderForFamilySelect').on('change', 'select#selectImplantFamily', function(){ 
    if ($(this).val() == "loadMore") { 
     event.preventDefault(); 
     $("select#selectImplantFamily option.ui-screen-hidden").removeClass("ui-screen-hidden"); 
     $("select#selectImplantFamily").selectmenu("refresh"); 
    } else { 
     loadImplantsOfFamily($(this).val()); 
    } 
    }); 
}); 

Answer 1

당신은 기본을 방지 할뿐만 아니라 전파를 중지 할뿐만 아니라 필요 (그래서이 시점하지만 코드에서 아무것도 할 나던 클릭)이 같은 :

$(document).ready(function() { 
    $('#holderForFamilySelect').on('change', 'select#selectImplantFamily', function(){ 
    if ($(this).val() == "loadMore") { 
     event.preventDefault(); 
     event.stopPropagation(); 
     $("select#selectImplantFamily option.ui-screen-hidden").removeClass("ui-screen-hidden"); 
     $("select#selectImplantFamily").selectmenu("refresh"); 
    } else { 
     loadImplantsOfFamily($(this).val()); 
    } 
    }); 
});