javascript - 효과 - jquery toggle




jQuery를 사용하여 IE에서 선택 옵션 숨기기 (12)

AuthorProxy에서 제공하는 솔루션을 사용하면 Internet Explorer에서 잘 작동하지만 파이어 폭스의 드롭 다운에서 .val ()을 시도 할 때 어떤 의미가없는 펑키 값을 얻게됩니다. 브라우저 특정 기능을 포함하도록 옵션을 수정했으며 firefox에서 hide / show가 작동합니다.

$.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();
            }
        }
    });
};

현재 jQuery를 사용하여 다음 코드를 사용하여 선택 옵션을 숨기거나 표시합니다.

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

이것은 파이어 폭스에서 잘 작동하지만, 다른 브라우저에서는 좋지 않습니다. Chrome, Opera 및 IE에서 select 옵션을 숨기는 방법은 무엇입니까?


IE 11 (Edge)에서 다음 코드가 작동합니다.

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

그리고 광고를 뒤로,

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

나는 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) :

  • Windows XP : IE 6.0, Firefox 3.0, Safari 4.0, Opera 10.0, Chrome 14.0
  • Windows 8 : IE 10.0 메트로
  • iOS 3.2 (iPad), iOS 6.0 (iPhone 5)
  • Android 1.6 (Sony Xperia X10)

jsfiddle


내 의견은 다른 답변과 조금 다릅니다.

목표는 옵션을 숨기지 않고 비활성화 (UI를 일관성있게 유지)하는 것입니다.

내 시나리오 :

폼에 여러 개의 선택 항목이 있고 사용자가 선택 항목 중 하나에서 옵션을 선택하면 다른 선택 항목은이 옵션을 비활성화하고 반대의 경우도 마찬가지입니다. 사용자는 이미 선택된 동일한 옵션을 선택할 수 없습니다. 우리는 일반적으로 옵션을 사용하지 않지만 IE 7은 지원하지 않습니다. 또한 사용자는 새 선택 항목을 추가하는 옵션을 가져옵니다.

해결책 :

길 위에 :

브라우저가 IE7 인 경우 선택한 항목을 채우는 동안 다른 옵션에서 이미 선택된 옵션을 비활성화하면 옵션 ( " data-ie7-disabled ")에 사용자 정의 속성을 추가하고 비활성화 된 옵션의 색상을 ' #cccccc '로 변경합니다 #cccccc '(비활성화 된 옵션의 표준 색상)입니다. 이렇게하면 브라우저간에 UI가 동일하게 보입니다.

변경시 :

이전 옵션을 로컬 변수에 저장합니다 (포커스에 저장 됨).

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

  1. 사용자는 다른 드롭 다운에서 선택되지 않은 완전한 새 옵션을 선택합니다. 그런 다음 다른 선택을 반복하고 색상을 변경하고 다른 선택에서이 선택된 옵션에 사용자 정의 속성을 추가합니다.

  2. 사용자가 이미 선택된 옵션을 선택할 때 (회색으로 표시된 옵션). 옵션에이 사용자 정의 속성이 먼저 있는지 확인합니다. 그렇다면> "이 옵션은 이미 선택되었거나 BLAH BLAH"라는 오류 메시지와 함께 이전 옵션으로 되돌립니다.

  3. 사용자가 기존 옵션을 다른 드롭 다운 목록에서 선택되지 않은 새로운 옵션으로 변경하면 다시 다른 모든 선택 옵션을 반복하고 색상 및 사용자 정의 속성을 제거합니다.

희망이 도움이됩니다.


단지 그것을 삭제하고 JavaScript에 var에 저장합니다. 나중에 필요할 때 새 객체를 만들 수 있습니다.

그렇지 않으면 위에 언급 된 disabled 속성을 시도하십시오.


당신은 IE에서 지원되지 않습니다 (그리고 아마도 크롬이나 오페라에서도 그렇지 않습니다). 옵션을 모두 제거한 후 나중에 보이지 않게하려면 다시 추가해야합니다. 그러나 대부분의 경우 간단한 disabled="disabled" 충분해야하며 옵션을 제거하고 추가하는 것보다 훨씬 간단합니다.


방금 선택한 항목 전체를 복제하는 대신 방금 span 요소를 숨기고 span 숨길 필요가있는 옵션을 바꿨습니다 (브라우저에서 시각적으로 어쨌든 표시하지는 않았지만 생각했습니다). 복잡한 논리에 대해 반복하여 코드를 변경하십시오 (복잡한 경우).

스팬은 option 대한 참조를 저장하고 표시해야 할 때 option 으로 대체합니다.

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

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

편집 # 2 (이 대신 사용) : 이 모든 복제 / 참조 / 바꾸기 쓰레기를 대신 단지 스팬 함께 옵션을 래핑, 스팬 숨기기 및 표시에 다시 스팬 옵션을 다시 바꿉니다. .

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


선택 영역 내의 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>');
    });

정확히 당신이 원하는 것은 아니지만 아마 도움이 될 것입니다. 더 작은 드롭 다운의 경우, 확실히 쉽습니다.


이것을 사용할 수 있습니다 :

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

Safari와 Opera를 제외한 모든 브라우저에서 정상적으로 작동합니다. 다른 최상의 솔루션을 찾고 있습니다 :)


제거한 다음 Internet Explorer에 다시 추가해야합니다.

제거:

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

추가하려면 :

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

옵션 텍스트에 sizeValue가 있어야 실제로 볼 수 있습니다.


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);
    });
};

/**
* 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);
        }
    });
};




html-select