CODEWITHSUNDEEP
jqueryhtmlcss
user3574492
user3574492

Reputation: 6435

How to fade in select options using jQuery

Is there a way I can fade in select options when the select is clicked and override the standard behavior?

Say I have the following select:

    <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>

Is there a way I can make the options appear slowly with a fade in using jQuery?

Before anyone recommends it is not possible for me to change my select to a UL tag or any other html tag.

Upvotes: 2

Views: 2509

Answers (4)

user3574492
user3574492

Reputation: 6435

So the basic answer is you can't do such a thing as it's the browser which renders the select element. Of course there are alternative methods for getting around it such as using ul and li elements instead but that is not possible in my case as I have select dropdowns across my application and it's just not feasible to change them all.

Upvotes: 0

Reuben Gomes
Reuben Gomes

Reputation: 860

Use this code:

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

Upvotes: 0

Iv&#225;n Rodr&#237;guez Torres
Iv&#225;n Rodr&#237;guez Torres

Reputation: 4449

Short answer: You can't

Explanation You can't modify the select behaviour in that way, but you can use a bit of js to make some DOM elements have the same behavior. Here you have an example: 

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

That is a basic code and can be optimized a lot, but it's a good starting point.

Another option is using a plugin, like chosen

Upvotes: 0

Laith
Laith

Reputation: 385

Ok hope this is what you are looking for :

I did this part only :

fade in select options when the select is clicked

$(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>

Hope that it help you .

Upvotes: 1

Related Questions