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

好的希望这就是你要找的东西：

我只做了这一部分：

单击选择时淡入选择选项

＆＃13;

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

＆＃13;

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

＆＃13;

希望它对你有所帮助。

Answer 2

使用此代码：

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

Answer 3

简短回答：你不能

解释您不能以这种方式修改选择行为，但您可以使用一些js来使某些DOM元素具有相同的行为。这里有一个例子：

map(list, ...)

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

这是一个基本代码，可以进行很多优化，但这是一个很好的起点。

另一种选择是使用插件，例如chosen

Answer 4

所以基本的答案是你不能做这样的事情，因为它是渲染select元素的浏览器。当然，还有其他方法可以解决这个问题，例如使用ul和li元素，但在我的情况下这是不可能的，因为我在我的应用程序中选择了下拉列表并且更改它们是不可行的所有

如何使用jQuery淡入选择选项

4 个答案: