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

[OK]を希望、これはあなたが探しているものです。

私はこの部分のみをした：選択オプションで

フェードを選択が

$(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="" />

基本的なコードで、多くのことを最適化することができますが、それは良い出発点です：ここでは、例を持っています。

別のオプションは、だから、基本的な答えは、それはselect要素をレンダリングするブラウザだとあなたがそのようなことを行うことができないですchosen