Jquery 过渡：全部。4s轻松进出； } .自定义选项：类型的第一个{ 边界半径：4px4p0； } .自定义选项：类型的最后一个{ 边界底部：0； 边界半径：0 0 4px 4px； } .自定义选项：悬停， .custom-option.selection{ 背景#f9f9f9； } 轮廓 例子 单词 集成电路 例子 passport

您正在创建自定义选择，以便更好地可视化，请找到您期望的codepen链接

$（“.custom select”）。每个（函数（）{
var classes=$（this.attr（“类”），
id=$（this.attr（“id”），
name=$（this.attr（“name”）；
var模板=“”；
模板+=''+$（this.attr（“占位符”）+''；
模板+=''；
$（this.find（“option”）.each（function（）{
模板+=''+$（this.html（）++''；
});
模板+=''；
$（此）.wrap（“”）；
$（this.hide（）；
$（此）.after（模板）；
});
$（“.custom选项：类型的第一个”）.hover（函数（）{
$（this）.parents（“.customoptions”）.addClass（“选项悬停”）；
}，函数（）{
$（this）.parents（“.customoptions”）.removeClass（“选项悬停”）；
});
$（“.custom select trigger”）。单击（“click”，函数（）{
$（'html'）.one（'click'，function（）{
$（“.custom select”）.removeClass（“打开”）；
});
$（this）.parents（“.custom select”）.toggleClass（“opened”）；
event.stopPropagation（）；
});
$（“.custom option”）。在（“单击”，函数（）{
$（this.parents（“.custom select wrapper”）.find（“select option:selected”）.val（$（this.data（“value”））；
console.log（$（this.parents）（.custom select wrapper”）.find（“select”）.val（$（this.data（“value”））
$（this）.parents（“.custom options”）.find（“.custom option”）.removeClass（“selection”）；
$（此）.addClass（“选择”）；
$（this）.parents（“.custom select”）.removeClass（“opened”）；
var sel=$（this.parents（“.custom select”）.find（“.custom select trigger”）.text（$（this.text（））；
console.log（$（sel.text（））
如果（$（sel.text（）=“配置文件”）{
$（“#ic”）.show（）；
$（“#passport”）.hide（）；
}否则{
$（“#ic”）.hide（）；
$（“#passport”）.show（）；
}
});
.container{
边缘顶部：25px；
}
身体{
背景：#ededed；
字体系列：“开放式Sans”，无衬线；
}
.中心{
位置：绝对位置；
显示：内联块；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#ic，
#护照{
显示：无；
}
/**自定义选择**/
.自定义选择包装器{
位置：相对位置；
显示：内联块；
用户选择：无；
}
.自定义选择包装器选择{
显示：无；
}
.自定义选择{
位置：相对位置；
显示：内联块；
}
.自定义选择触发器{
位置：相对位置；
显示：块；
宽度：130px；
填充：0 84px 0 22px；
字体大小：22px；
字体大小：300；
颜色：#fff；
线高：60px；
背景：#5c9cd8；
边界半径：4px；
光标：指针；
文本对齐：居中；
}
.自定义选择触发器：在{
位置：绝对位置；
显示：块；
内容：''；
宽度：10px；
高度：10px；
最高：50%；
右：25px；
利润上限：-3px；
边框底部：1px实心#fff；
右边框：1px实心#fff；
变换：旋转（45度）translateY（-50%）；
过渡：全部。4s轻松进出；
变换原点：50%0；
}
.custom-select.opened.custom-select触发器：之后{
利润上限：3倍；
变换：旋转（-135度）平移（-50%）；
}
.自定义选项{
位置：绝对位置；
显示：块；
最高：100%；
左：0；
右：0；
最小宽度：100%；
利润率：15px0；
边框：1px实心#b5；
边界半径：4px；
框大小：边框框；
盒影：02px1pRGBA（0,0,0,07）；
背景：#fff；
过渡：全部。4s轻松进出；
文本对齐：居中；
不透明度：0；
可见性：隐藏；
指针事件：无；
转换：translateY（-15px）；
}
.custom-select.opened.custom选项{
不透明度：1；
能见度：可见；
指针事件：全部；
变换：translateY（0）；
}
.自定义选项：在{
位置：绝对位置；
显示：块；
内容：''；
底部：100%；
右：25px；
宽度：7px；
高度：7px；
保证金底部：-4px；
边框顶部：1px实心#b5；
左边框：1px实心#b5；
背景：#fff；
变换：旋转（45度）；
过渡：全部。4s轻松进出；
}
。选项悬停：在{
背景#f9f9f9；
}
.自定义选项{
位置：相对位置；
显示：块；
填充：0 22px；
边框底部：1px实心#b5；
字号：18px；
字号：600；
颜色：#b5；
线高：47px；
光标：指针；
过渡：全部。4s轻松进出；
}
.自定义选项：类型的第一个{
边界半径：4px4p0；
}
.自定义选项：类型的最后一个{
边界底部：0；
边界半径：0 0 4px 4px；
}
.自定义选项：悬停，
.custom-option.selection{
背景#f9f9f9；
}

轮廓
单词
集成电路
护照
确保在脚本之前加载DOM。如果在加载DOM之前注册了该事件，则无法激活您的事件。看起来，您将使用自己的下拉列表替换
选择
。因此，您没有更改select值，因此此代码
$（“#sources”）。在（“更改”上，
从不触发。您需要连接到替换的“选择”，可能是
$（“.custom选项”）。在（“单击”，
谢谢你，Mihai T，你帮了我很多。@Mariafabianernandes如果这解决了你的问题。请评分/接受我的答案。谢谢。很高兴我能帮上忙。干杯：完成问题Miahi，如果我选择使用开关而不是if-else，万一我获得了很多选项，我该怎么说？@Mariafabianernandes我用sw编辑了我的答案瘙痒声明（注释掉if声明）@MariaFabianHernandes很高兴我能帮上忙。
    <div class="center">
    <select name="sources" id="sources" class="custom-select sources" 
    placeholder="chose">
      <option value="profile">Profile</option>
      <option value="word">Word</option>
    </select>
    </div>
    <div id="ic">IC</div>
    <div id="passport">passport</div>

$(".custom-select").each(function() {
  var classes = $(this).attr("class"),
      id      = $(this).attr("id"),
      name    = $(this).attr("name");
  var template =  '<div class="' + classes + '">';
      template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
      template += '<div class="custom-options">';
      $(this).find("option").each(function() {
        template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
      });
  template += '</div></div>';

  $(this).wrap('<div class="custom-select-wrapper"></div>');
  $(this).hide();
  $(this).after(template);

});

$(".custom-option:first-of-type").hover(function() {
  $(this).parents(".custom-options").addClass("option-hover");
}, function() {
  $(this).parents(".custom-options").removeClass("option-hover");
});

$(".custom-select-trigger").on("click", function() {
  $('html').one('click',function() {
    $(".custom-select").removeClass("opened");
  });
  $(this).parents(".custom-select").toggleClass("opened");
  event.stopPropagation();
});

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});

$("#sources").on("change", function() {
  if(this.value == "profile") {
    $("#ic").show();
    $("#passport").hide();
  } else {
    $("#ic").hide();
    $("#passport").show();
  }
});

body {
  background: #ededed;
  font-family: 'Open Sans', sans-serif;
}
.center {
  position: absolute;
  display: inline-block;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

#ic, #passport { display: none; }

/** Custom Select **/
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  user-select: none;
}
  .custom-select-wrapper select {
    display: none;
  }
  .custom-select {
    position: relative;
    display: inline-block;
  }
    .custom-select-trigger {
      position: relative;
      display: block;
      width: 130px;
      padding: 0 84px 0 22px;
      font-size: 22px;
      font-weight: 300;
      color: #fff;
      line-height: 60px;
      background: #5c9cd8;
      border-radius: 4px;
      cursor: pointer;
      text-align: center;
    }
      .custom-select-trigger:after {
        position: absolute;
        display: block;
        content: '';
        width: 10px; height: 10px;
        top: 50%; right: 25px;
        margin-top: -3px;
        border-bottom: 1px solid #fff;
        border-right: 1px solid #fff;
        transform: rotate(45deg) translateY(-50%);
        transition: all .4s ease-in-out;
        transform-origin: 50% 0;
      }
      .custom-select.opened .custom-select-trigger:after {
        margin-top: 3px;
        transform: rotate(-135deg) translateY(-50%);
      }
  .custom-options {
    position: absolute;
    display: block;
    top: 100%; left: 0; right: 0;
    min-width: 100%;
    margin: 15px 0;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 1px rgba(0,0,0,.07);
    background: #fff;
    transition: all .4s ease-in-out;
    text-align: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
  }
  .custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
  }
    .custom-options:before {
      position: absolute;
      display: block;
      content: '';
      bottom: 100%; right: 25px;
      width: 7px; height: 7px;
      margin-bottom: -4px;
      border-top: 1px solid #b5b5b5;
      border-left: 1px solid #b5b5b5;
      background: #fff;
      transform: rotate(45deg);
      transition: all .4s ease-in-out;
    }
    .option-hover:before {
      background: #f9f9f9;
    }
    .custom-option {
      position: relative;
      display: block;
      padding: 0 22px;
      border-bottom: 1px solid #b5b5b5;
      font-size: 18px;
      font-weight: 600;
      color: #b5b5b5;
      line-height: 47px;
      cursor: pointer;
      transition: all .4s ease-in-out;
    }
    .custom-option:first-of-type {
      border-radius: 4px 4px 0 0;
    }
    .custom-option:last-of-type {
      border-bottom: 0;
      border-radius: 0 0 4px 4px;
    }
    .custom-option:hover,
    .custom-option.selection {
      background: #f9f9f9;
    }

$(".custom-option").on("click", function() {
  $(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
  $(this).parents(".custom-options").find(".custom-option").removeClass("selection");
  $(this).addClass("selection");
  $(this).parents(".custom-select").removeClass("opened");
  $(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());

  if($(this).data("value") == "profile") {
    $("#ic").show();
    $("#passport").hide();
  } else {
    $("#ic").hide();
    $("#passport").show();
  }
});