[jquery css实现下拉列表]jquery+css实现下拉列表功能

【www.bbyears.com--jquery】

<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
  //使用on方法，采用事件委派机制，selector-option-container中的内容为后续动态追加
  $(".selector").on("click", ".selector-expand", function() {
    $(this).parent().children(".selector-option-container").children().remove();
    $(this).parent().children(".selector-option-container").append("apricot");
    $(this).parent().children(".selector-option-container").append("banana");
    $(this).nextAll(".selector-option-container").removeClass("hide");
  });
  $(".selector").on("click", ".selector-collapse", function() {
    $(this).nextAll(".selector-option-container").addClass("hide");
  });
  $(".selector-t1").on("click", ".selector-option", function() {
    $(this).parent().parent().children(".selector-hint").text($(this).text());
    $(this).parent().addClass("hide");
  });
  $(".selector-t1").on("click", ".selector-checkbox", function() {
    $(this).parent().parent().parent().children(".selector-hint").text($(this).parent().next().text());
    //采用prop方法，对于值为布尔型的属性赋值
    $(this).prop("checked", false);
    $(this).parent().parent().addClass("hide");
  });
});
</script>




 
  select fruit
  +
  -
  
  
 




 
  select fruit
  +
  -
  
  
 

本文来源：http://www.bbyears.com/wangyezhizuo/136299.html