jQuery를 사용하여 선택 옵션을 페이드 아웃하는 방법

Question

선택을 클릭했을 때 선택 옵션이 희미 해지고 표준 동작을 무시할 수있는 방법이 있습니까?

내가이 말 선택 다음

<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size"> 
    <option value="">Choose an option</option> 
    <option value="King Size (176cm)" class="attached enabled">King Size (176cm)</option> 
    </select> 

내가 옵션이 jQuery를 사용하여 페이드 천천히 표시 할 수있는 방법이 있나요?

누군가가 추천하기 전에 선택 항목을 UL 태그 또는 다른 HTML 태그로 변경할 수 없습니다. 나는 단지이 부분 않았다

:

Answer 1

같은 플러그인을 사용하는 것은 그래서 기본적인 대답은 선택 요소를 렌더링 브라우저의 당신이 그런 일을 할 수 없다. 물론 그 대신에 ul 및 li 요소를 사용하는 것과 같은 방법으로 주위를 감당할 수 있지만 내 응용 프로그램에서 드롭 다운을 선택 했으므로 가능하지 않습니다. 모두 변경하기가 쉽지 않습니다.

Answer 2

좋아 희망이 당신이 찾고있는 무엇을 선택 클릭 할 때 선택 옵션에서

이

페이드

$(document).ready(function(){ 
 
    $("#size").change(function(){ 
 
     $("#size").fadeOut(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size"> 
 
    <option value="">Choose an option</option> 
 
    <option value="King Size (176cm)" class="attached enabled">King Size (176cm)</option> 
 
    </select>

홉 그것은 당신을 도울 것입니다.

Answer 3

사용이 코드 :

$(document).ready(function(){ 
    $('option').hide(); 
    $('#size').click(function(){ 
     $('option').fadeIn(900); 
    }); 
}); 

Answer 4

짧은 답변 : 당신은

설명 당신은 그런 식으로 선택 동작을 수정할 수 없습니다,하지만 당신은 할 JS의 비트를 사용할 수 있습니다 일부 DOM 요소는 동일한 동작을합니다. 다음은 예제를 가지고 :

$("document").ready(function() { 
 
    $(".option").click(function() { 
 
    $(".option").slideDown(); 
 
    }); 
 

 
    $(".option:not(.selected)").click(function() { 
 
    $(".option:not(.selected)").slideUp(); 
 

 
    $(".option.selected").text($(this).text()) 
 
    $("#selectVal").val($(this).data("value")) 
 
    }); 
 

 

 

 

 
});

li { 
 
    list-style: none 
 
} 
 

 
.option { 
 
    display: none 
 
} 
 

 
.option:first-child { 
 
    display: block 
 
} 
 

 
.option:not(.selected):hover { 
 
    background: red 
 
} 
 

 
#select { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    cursor: pointer 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="select"> 
 
    <li class="option selected">--</li> 
 
    <li class="option" data-value="">--</li> 
 
    <li class="option" data-value="1">one</li> 
 
    <li class="option" data-value="2">two</li> 
 
</ul> 
 
<input id="selectVal" type="hidden" value="" />

기본 코드와 많이 최적화 될 수 있지만, 그것은 좋은 출발점

.

또 다른 옵션

이 chosen