[JQUERY] A는 CSS로 메뉴를 <선택>에서 어떻게 <옵션>을 숨기려면?

A는 CSS로 메뉴를 <선택>에서 어떻게 <옵션>을 숨기려면?

해결법

1. ---

   1.당신은 숨어있는 두 가지 방법을 구현해야합니다. 크롬이나 IE를 FF에 대한 없음 작품을하지만 : 표시합니다. 따라서 두 번째 방법은 디스플레이를 구비 한 에서 <옵션> 배치되지 않는다 : 없음. FF는 (사양에 따라, 기술적으로 잘못된 HTML)을하지 않습니다하지만 크롬과 IE는 그것은 옵션을 숨길 수 있습니다.

   당신은 숨어있는 두 가지 방법을 구현해야합니다. 크롬이나 IE를 FF에 대한 없음 작품을하지만 : 표시합니다. 따라서 두 번째 방법은 디스플레이를 구비 한 에서 <옵션> 배치되지 않는다 : 없음. FF는 (사양에 따라, 기술적으로 잘못된 HTML)을하지 않습니다하지만 크롬과 IE는 그것은 옵션을 숨길 수 있습니다.

   편집 : 오, 그래, 난 이미 jQuery를이 구현 :

   jQuery.fn.toggleOption = function( show ) {
       jQuery( this ).toggle( show );
       if( show ) {
           if( jQuery( this ).parent( 'span.toggleOption' ).length )
               jQuery( this ).unwrap( );
       } else {
           if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
               jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
       }
   };
   

   편집 2 : 다음은이 기능을 사용하는 방법은 다음과 같습니다

   jQuery(selector).toggleOption(true); // show option
   jQuery(selector).toggleOption(false); // hide option
   

   편집 3 : 추가 추가 검사는 @ user1521986 제안

2. ---

   2.HTML5를 들어, '숨겨진'속성을 사용할 수 있습니다.

   HTML5를 들어, '숨겨진'속성을 사용할 수 있습니다.

   <option hidden>Hidden option</option>
   

   그것은 IE <(11)에 의해 지원되지 않습니다하지만 경우에 당신은 어쩌면 / 추가 요소를 제거하거나 의미 정확한 구조를 안하고 비교하여 더 나은 장애인과 함께 단지 설정 숨김 속성을하는 것, 몇 가지 요소를 숨길하기 만하면됩니다.

   <선택> <옵션> 옵션 1 <옵션> 옵션 2 <옵션 숨겨진> 숨겨진 옵션

   참고.

3. ---

   3.나는 그것이 길 아래에 문제를 일으킬 수있는 유효한 HTML이 아니기 때문에 당신이 래퍼를 사용하는 솔루션을 사용하지 않는 것이 좋습니다 것입니다. 내가 선호하는 솔루션이 실제로 숨기려는 것이 어떤 옵션을 제거하고 필요에 따라 복원하는 것입니다 생각합니다. jQuery를 사용하여, 당신은 단지이 3 기능이 필요합니다 :

   나는 그것이 길 아래에 문제를 일으킬 수있는 유효한 HTML이 아니기 때문에 당신이 래퍼를 사용하는 솔루션을 사용하지 않는 것이 좋습니다 것입니다. 내가 선호하는 솔루션이 실제로 숨기려는 것이 어떤 옵션을 제거하고 필요에 따라 복원하는 것입니다 생각합니다. jQuery를 사용하여, 당신은 단지이 3 기능이 필요합니다 :

   첫 번째 함수는 선택의 원래 내용을 저장합니다. 그냥 안전을 위해, 당신은 당신이 페이지를로드 할 때이 함수를 호출 할 수 있습니다.

   function setOriginalSelect ($select) {
       if ($select.data("originalHTML") == undefined) {
           $select.data("originalHTML", $select.html());
       } // If it's already there, don't re-set it
   }
   

   이 다음 기능은 원래 내용이 저장되었는지 확인하려면 위의 함수를 호출하고 단순히 DOM에서 옵션을 제거합니다.

   function removeOptions ($select, $options) {
       setOriginalSelect($select);
       $options.remove();
    }
   

   원래 옵션 모두 "리셋"백업 할 때마다 마지막 기능을 사용할 수 있습니다.

   function restoreOptions ($select) {
       var ogHTML = $select.data("originalHTML");
       if (ogHTML != undefined) {
           $select.html(ogHTML);
       }
   }
   

   이러한 모든 기능은 당신이 jQuery를 요소에 전달하는 것으로 기대합니다. 예를 들면 :

   // in your search function...
   var $s = $('select.someClass');
   var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');
   restoreOptions($s); // Make sure you're working with a full deck
   removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed
   

   다음은 작업의 예는 다음과 같습니다 http://jsfiddle.net/9CYjy/23/

4. ---

   4.라이언 P의 대답을 변경해야합니다 :

   라이언 P의 대답을 변경해야합니다 :

       jQuery.fn.toggleOption = function (show) {
           $(this).toggle(show);
           if (show) {
               if ($(this).parent('span.toggleOption').length)
                   $(this).unwrap();
           } else {
               **if ($(this).parent('span.toggleOption').length==0)**
                   $(this).wrap('<span class="toggleOption" style="display: none;" />');
           }
       };
   

   그렇지 않으면 너무 많은 태그에 싸여 도착

5. ---

   5.toggleOption 기능은 완벽하지 않습니다 내 응용 프로그램에서 불쾌한 버그를 소개했다. jQuery를은 () (.val)와 .arraySerialize와 혼동 얻을 것이다 내가 무엇을 의미하는지에 관해 알기 위해 옵션 4와 5를 선택하십시오 :

   toggleOption 기능은 완벽하지 않습니다 내 응용 프로그램에서 불쾌한 버그를 소개했다. jQuery를은 () (.val)와 .arraySerialize와 혼동 얻을 것이다 내가 무엇을 의미하는지에 관해 알기 위해 옵션 4와 5를 선택하십시오 :

   <select id="t">
   <option value="v1">options 1</option>
   <option value="v2">options 2</option>
   <option value="v3" id="o3">options 3</option>
   <option value="v4">options 4</option>
   <option value="v5">options 5</option>
   </select>
   <script>
   jQuery.fn.toggleOption = function( show ) {
       jQuery( this ).toggle( show );
       if( show ) {
           if( jQuery( this ).parent( 'span.toggleOption' ).length )
               jQuery( this ).unwrap( );
       } else {
           jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
       }
   };
   
   $("#o3").toggleOption(false); 
   $("#t").change(function(e) {
       if($(this).val() != this.value) {
       console.log("Error values not equal", this.value, $(this).val());
       }
   });
   </script>
   

6. ---

   6.선택 입력은이 방법으로 까다로운 있습니다. 무엇 대신를 사용하지 않도록 설정하는 방법에 대한,이 크로스 브라우저를 작동합니다 :

   선택 입력은이 방법으로 까다로운 있습니다. 무엇 대신를 사용하지 않도록 설정하는 방법에 대한,이 크로스 브라우저를 작동합니다 :

   $('select').children(':nth-child(even)').prop('disabled', true);
   

   이것은 모든-다른 <옵션> 요소를 사용할 수 없게됩니다,하지만 당신은 당신이 원하는 어느 하나를 선택할 수 있습니다.

   여기 데모입니다 http://jsfiddle.net/jYWrH/

   참고 : 당신이 .removeProp ( '장애인')를 사용할 수있는 요소의 장애인 속성을 제거하십시오.

   당신은 숨겨진 선택 요소 숨기기에 원하는 <옵션> 요소를 절약 할 수있다 :

   $('#visible').on('change', function () {
       $(this).children().eq(this.selectedIndex).appendTo('#hidden');
   });
   

   그런 다음 요소가 원래의 선택 요소로 다시 <옵션>를 추가 할 수 있습니다 :

   $('#hidden').children().appendTo('#visible');
   

   이 두 가지 예에서 눈에 보이는 선택 요소가 볼의 ID를 가지고 있으며, 숨겨진 선택 요소가 숨겨져의 ID를 가지고 예상됩니다.

   여기 데모입니다 http://jsfiddle.net/jYWrH/1/

   CSTE 연구진은 () jQuery를 1.7과이 답변의 사용에 새로운 것을 참고 .bind ()와 동일합니다 : http://api.jquery.com/on

7. ---

   7.간단한 대답 : 당신은 할 수 없습니다. 양식 요소는 매우 스타일링 기능이 제한됩니다.

   간단한 대답 : 당신은 할 수 없습니다. 양식 요소는 매우 스타일링 기능이 제한됩니다.

   가장 좋은 대안은 (단지 IE가 자동으로 해당 작업을 수행하기 때문에, 어쩌면 회색) 옵션이 비활성화 = true로 설정하는 것, 이것은 옵션이 unclickable 할 것입니다.

   당신이 할 수있는 경우 또는 완전히 옵션 요소를 제거합니다.

8. ---

   8.

   // Simplest way
   
   var originalContent = $('select').html();
   
   $('select').change(function() {
       $('select').html(originalContent); //Restore Original Content
       $('select option[myfilter=1]').remove(); // Filter my options
   });
   

9. ---

   9.이미 JS를 사용하고 있기 때문에, 당신은 페이지의 숨겨진 SELECT 요소를 만들 수 있으며, 각 항목에 대해 해당 목록에서 숨기기하려고하는, 그것은 숨겨진 목록으로 이동합니다. 이 방법은, 그들은 쉽게 복원 할 수 있습니다.

   이미 JS를 사용하고 있기 때문에, 당신은 페이지의 숨겨진 SELECT 요소를 만들 수 있으며, 각 항목에 대해 해당 목록에서 숨기기하려고하는, 그것은 숨겨진 목록으로 이동합니다. 이 방법은, 그들은 쉽게 복원 할 수 있습니다.

   나는 방법을 모른다 즉석 순수 CSS에서 일을 ... 나는 디스플레이 생각했을 것이다 : 없음 트릭 일 것이다.

10. ---

    10.!!! 경고!

    !!! 경고!

    "WHILE"에 의해 두 번째 "IF"를 교체하거나 작동하지 않습니다!

    jQuery.fn.toggleOption = function( show ) {
        jQuery( this ).toggle( show );
        if( show ) {
            while( jQuery( this ).parent( 'span.toggleOption' ).length )
                jQuery( this ).unwrap( );
        } else {
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
        }
    };
    

11. ---

    11.당신은 자바 스크립트를 사용하여 <선택>에서 제거해야합니다. 즉 그들을 멀리 갈 수 있도록하는 유일한 보장 방법입니다.

    당신은 자바 스크립트를 사용하여 <선택>에서 제거해야합니다. 즉 그들을 멀리 갈 수 있도록하는 유일한 보장 방법입니다.

12. ---

    12.이 하나 크롬에서 나를 위해 작동하는 것 같다

    이 하나 크롬에서 나를 위해 작동하는 것 같다

    $("#selectid span option").unwrap();
    $("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');
    

13. ---

    13.게임에 늦은하지만, 이들 중 대부분은 매우 복잡하게 보인다.

    게임에 늦은하지만, 이들 중 대부분은 매우 복잡하게 보인다.

    내가 그것을 어떻게 다음과 같습니다

    var originalSelect = $('#select-2').html();
    
    // filter select-2 on select-1 change
    $('#select-1').change(function (e) {
    
        var selected = $(this).val();
    
        // reset select ready for filtering
        $('#select-2').html(originalCourseSelect);
    
        if (selected) {
            // filter
            $('#select-2 option').not('.t' + selected).remove();
        }
    
    });
    

    선택-1의 마크 업 :

    <select id='select-1'>
    <option value=''>Please select</option>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    </select>
    

    선택-2의 마크 업 :

    <select id='select-2'>
    <option class='t1'>One</option>
    <option class='t2'>Two</option>
    <option>Always visible</option>
    </select>
    

from https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css by cc-by-sa and MIT license