복붙노트

[JQUERY] jQuery를 사용하여 IE에서 숨기기 옵션을 선택

JQUERY

jQuery를 사용하여 IE에서 숨기기 옵션을 선택

해결법

  1. 1.당신이해야 할 수도 있습니다 - 난 그냥이 건너 대신 전체가 이상 선택 복제의 난 그냥 필요가 스팬 요소를 숨길 수와 (브라우저 didnt 한 시각적 어쨌든 그들에게 보여하지만, 내가 생각하는) 스팬을 숨기고있는 옵션을 대체를 통해 온 복잡한 논리의 스팬을 반복하는 (복잡한 경우) 코드를 변경합니다.

    당신이해야 할 수도 있습니다 - 난 그냥이 건너 대신 전체가 이상 선택 복제의 난 그냥 필요가 스팬 요소를 숨길 수와 (브라우저 didnt 한 시각적 어쨌든 그들에게 보여하지만, 내가 생각하는) 스팬을 숨기고있는 옵션을 대체를 통해 온 복잡한 논리의 스팬을 반복하는 (복잡한 경우) 코드를 변경합니다.

    스팬은 옵션에 대한 참조를 저장하고 그들이 표시 할 필요가있을 때 그것으로 자신을 대체합니다.

    이 코드는 분명히 리팩토링과 prettified 할 수 있습니다.

    http://fiddle.jshell.net/FAkEK/12/show/

    편집 # 2 (USE THIS 대신) 대신이 모든 복제 / 참조 / 교체 쓰레기를 수행하는, 단지, 스팬 옵션을 감싸 스팬을 숨기고, 쇼에 바로 다시 옵션으로 범위를 교체하는 것이 나에게 발생했습니다. .

    http://fiddle.jshell.net/FAkEK/25/show/

  2. 2.나는 MEDER 유효한 답을 제공하고 여기에 약간 나를 위해 작동 무엇을 반영하도록 변경 생각 :

    나는 MEDER 유효한 답을 제공하고 여기에 약간 나를 위해 작동 무엇을 반영하도록 변경 생각 :

    $.fn.optVisible = function( show ) {
    if( show ) {
        this.filter( "span > option" ).unwrap();
    } else {
        this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
    }
    return this;
}

    (긴 라이브 BrowserStack) 테스트 :

    jsfiddle

  3. 3.당신은 그것 (안 크롬이나 오페라 중 하나에 assumably과) IE에서 지원되지 않습니다. 당신은 모두 옵션을 제거하고 당신이 그들을 진정으로 보이지하려는 경우 나중에 다시 추가해야합니다. 그러나 대부분의 경우 간단한 비활성화 =는 "장애인"충분하고, 제거하고 옵션의 추가 처리보다 간단 많아서입니다한다.

    당신은 그것 (안 크롬이나 오페라 중 하나에 assumably과) IE에서 지원되지 않습니다. 당신은 모두 옵션을 제거하고 당신이 그들을 진정으로 보이지하려는 경우 나중에 다시 추가해야합니다. 그러나 대부분의 경우 간단한 비활성화 =는 "장애인"충분하고, 제거하고 옵션의 추가 처리보다 간단 많아서입니다한다.

  4. 4.분리 시도 (). APPEND () 또는 insertafter 속성을 사용하여 필요한 경우는 () 나중에 다시 연결 수

    분리 시도 (). APPEND () 또는 insertafter 속성을 사용하여 필요한 경우는 () 나중에 다시 연결 수

  5. 5.옵션 사용을 제거하는 방법 :

    옵션 사용을 제거하는 방법 :

    var opt=$("option").detach();

    옵션 사용을 표시하려면 :

    opt.appendTo( "select" );

  6. 6.그냥 삭제 및 자바 스크립트의 VAR에 저장합니다. 당신은 당신이 나중에 필요할 새 개체를 만들 수 있습니다.

    그냥 삭제 및 자바 스크립트의 VAR에 저장합니다. 당신은 당신이 나중에 필요할 새 개체를 만들 수 있습니다.

    그렇지 않으면 위에서 언급 한 장애인 속성을보십시오.

  7. 7.

    /**
* Change visibility of select list option elements
* @param  {boolean}   stateVal      show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it's current state
*/
$.fn.toggleOptionVisibility = function (stateVal) {
    var isBool = typeof stateVal === "boolean";
    return this.each(function () {
         var $this = $(this);
         if (isBool) {
             if (stateVal) $this.filter("span > option").unwrap();
             else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
         }
         else {
             $this.filter("span > option").toggleOptionVisibility(true);
             $this.filter(":not(span > option)").toggleOptionVisibility(false);
        }
    });
};

  8. 8.방법은 당신이 그것을 크롬에서 작동한다 않았지만 nvm.Here는 또 다른 방법입니다

    방법은 당신이 그것을 크롬에서 작동한다 않았지만 nvm.Here는 또 다른 방법입니다

    select = $('#custcol7');
select.find('option[value=["'+sizeValue +'"]').remove();

    당신이 다시 보여주고 싶은 경우 :

    select.append('<option value="'+sizeValue+'"></option>');

    그것은 모든 브라우저와 정말 간단한 코드를 완벽하게 작동합니다. 당신이 더 입력됩니다 몇 가지 옵션을 숨기려면 문제는 ..하지만 그렇게 동적으로 변경하지 않으면 그 변수에 넣어 해결할 수 있습니다 :

    var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>';

select.append(options);

    이 방법 당신은 당신이 옵션 만 내가 또 다른 흥미로운 옵션을 준 once.Hope 입력 된 여러 장소에 / APPEND를 제거해야합니다. 친애하는.

  9. 9.하여 .load 방법도 있습니다 :

    하여 .load 방법도 있습니다 :

    s_parent.change(function(){
   s_child.load('./fetch_options.php",{'v',s_parent.val()});
}

    'fetch_options.php'스크립트는 단순히 당신이 사용하고 상위 값 (들)에 전달되는 어떤 데이터 소스를 기반으로하는 옵션 태그를 인쇄 할 것이다.

  10. 10.AuthorProxy에서 제공하는 솔루션을 사용하여, 그것은 IE를 위해 잘 작동하지만 파이어 폭스 I의 드롭 다운에 .val ()를 수행 할 때 이해가되지 않는 일부 펑키 값을 얻는다. 나는 브라우저 특정 기능, 숨기기 / 파이어 폭스에 대한 쇼의 작품을 포함하는 자신의 옵션을 수정했습니다.

    AuthorProxy에서 제공하는 솔루션을 사용하여, 그것은 IE를 위해 잘 작동하지만 파이어 폭스 I의 드롭 다운에 .val ()를 수행 할 때 이해가되지 않는 일부 펑키 값을 얻는다. 나는 브라우저 특정 기능, 숨기기 / 파이어 폭스에 대한 쇼의 작품을 포함하는 자신의 옵션을 수정했습니다.

    $.fn.toggleOptionVisibility = function (stateVal) {
    var isBool = typeof stateVal === "boolean";
    return this.each(function () {
        var $this = $(this);
        if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) {
            if (isBool) {
                if (stateVal) $this.filter("span > option").unwrap();
                else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
            }
            else {
                $this.filter("span > option").toggleOptionVisibility(true);
                $this.filter(":not(span > option)").toggleOptionVisibility(false);
            }   
        }
        else {              
            if (isBool) {
                $this.show();
            }
            else {
                $this.hide();
            }
        }
    });
};

  11. 11.필자는 다른 답변에 약간 다르다.

    필자는 다른 답변에 약간 다르다.

    목표는 옵션을 숨길 수 있지만 단지 (일관된 UI를 유지하기 위해)이를 비활성화 할 수 없습니다.

    내 시나리오 :

    나는 형태로 다수의 선택을하고, 사용자가 선택 중 하나의 옵션을 선택하면 다른 선택은 역이 옵션과 반대를 사용하지 않도록 설정해야합니다. 사용자가 이미 선택되어 같은 옵션을 선택 제한됩니다. 우리는 일반적으로 옵션을 비활성화하지만 IE 7을 지원하지 않는다. 사용자는 새로운 선택을 추가 할 수있는 옵션을 가져옵니다.

    해결책 :

    길 위에 :

    하여 선택을 채우고 난 ( "데이터 IE7 장애인") 옵션에 사용자 정의 속성을 추가하고 다른 선택에 이미 선택 옵션을 비활성화하고 또한 # '에 장애인 옵션의 색상을 변경하는 동안 브라우저는 IE7을 경우 (장애인 옵션의 표준 색상) CCCCCC '. 이 브라우저에서 동일한 UI 모양을 만든다.

    변경의 경우 :

    나는 (이 초점에 저장됩니다) 지역 변수의 이전 옵션을 저장합니다.

    사용자가 옵션을 변경하려고 할 때

    도움이 되었기를 바랍니다.

  12. 12.당신은 ( '> 옵션을 선택') VAR $ 옵트 = $의 조합을 통해 사용할 수 있습니다. 클론 ()와 $ ( '옵션을 선택 [값을 = "'+ 발 + '"'). 제거를 (). 이 시도 : 또 다른 예는있다. https://jsfiddle.net/sherali/jkw8fxzf/12/

    당신은 ( '> 옵션을 선택') VAR $ 옵트 = $의 조합을 통해 사용할 수 있습니다. 클론 ()와 $ ( '옵션을 선택 [값을 = "'+ 발 + '"'). 제거를 (). 이 시도 : 또 다른 예는있다. https://jsfiddle.net/sherali/jkw8fxzf/12/

    var $secondOption= $('#second-choice>option').clone();

$("#first-choice").change(function() {
    var userSelected = $(this).val();

    $('#second-choice').html($secondOption);
    $('#second-choice option[value="'+userSelected+'"').remove()
});

  13. 13.당신은 그것을 제거하고 Internet Explorer 용 다시 추가해야합니다.

    당신은 그것을 제거하고 Internet Explorer 용 다시 추가해야합니다.

    제거:

    $("#custcol7 option[value=" + sizeValue + "]").remove();

    추가하려면 :

    $("#custcol7").append( "<option value='sizeValue'>sizeValue</option>" );

    참고 실제로 무언가를보고, 옵션 텍스트도 sizeValue을 가질 필요가있다.

  14. 14.또한 선택 내에서 HTML을 대체 할 수 있습니다.

    또한 선택 내에서 HTML을 대체 할 수 있습니다.

    HTML :

    <input id="Button1" type="button" value="hide option" />

<select id="foo">
<option >stuff</option>
<option >stuff2</option>
</select>

    jQuery를 :

        $("#Button1").change(function () {
       $('#foo').html('<option >stuff</option>');
    });

    당신이 원하는, 그러나 아마 그것은 도움이되지 않음을 정확하게. 작은 드롭 다운의 경우, 확실히 쉽다.

  15. 15.IE 11 (에지)에서, 다음과 같은 코드가 작동하고있는 것입니다.

    IE 11 (에지)에서, 다음과 같은 코드가 작동하고있는 것입니다.

     $("#id option[value='1']").remove();

    및 광고 위로,

    $('<option>').val('1').text('myText').appendTo('#id');

  16. 16.MEDER의 솔루션은 내가 이것에 무슨 일이 있었는지,하지만 작은 비틀기와 기간에 이미 스팬에서 옵션을 감싸는 것을 방지하기 위해 :

    MEDER의 솔루션은 내가 이것에 무슨 일이 있었는지,하지만 작은 비틀기와 기간에 이미 스팬에서 옵션을 감싸는 것을 방지하기 위해 :

    $.fn.hideOption = function() {
    this.each(function() {
        if (!$(this).parent().is('span')) {
            $(this).wrap('<span>').hide();
        }
    });
};
$.fn.showOption = function() {
    this.each(function() {
        var opt = $(this).find('option').show();
        $(this).replaceWith(opt);
    });
};

  17. 17.당신은이를 사용할 수 있습니다 :

    당신은이를 사용할 수 있습니다 :

    $("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});

    그것은 사파리와 오페라를 제외한 모든 브라우저에서 잘 작동합니다. 나는 또 다른 최고의 솔루션을 찾고 있어요 :)

    18. from https://stackoverflow.com/questions/2031740/hide-select-option-in-ie-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 사용하여 "일 / 월 / 년"또는 "DD-MM-YYYY"또는 "DD-음-YYYY"형식의 날짜 문자열을 구문 분석하는 방법 자바 스크립트 또는 jQuery를 [중복]  (0) 2020.10.20
[JQUERY] 있는 jqGrid GET "일"과 "THEAD"jQuery를 사용하여  (0) 2020.10.20
[JQUERY] 어떻게 텍스트 상자에 캐럿의 픽셀 (x, y) 좌표를받을 수 있나요?  (0) 2020.10.20
[JQUERY] 타임 존의 이름을 가져옵니다  (0) 2020.10.20
[JQUERY] JQuery와 선택기 문자열에 특수 문자를 탈출하는 필요  (0) 2020.10.20
,

티스토리툴바