jquery mobile 中下拉选项默认显示问题

问题描述 投票:0回答:1

我不希望下拉默认选择的选项单独显示,但为什么会发生这种情况。 是否有一个选项可以跳过特定下拉列表的 jquery 设置?喜欢使用一些像preventDefault这样的函数吗? 请参考以下网址。
[1]:https://jsfiddle.net/ufLr0wo2/

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
 
    <script src="http://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>  
    
</head>

    <body>      
<div class="">  
    
<form>
        <select>
            <option value="0">item 0</option>
            <option>item 1</option>
            <option>item 2</option>
        </select>
</form>

</div>
    </body>
    </html>
html jquery dom jquery-ui jquery-mobile
1个回答
0
投票

如果您使用“nice-select”库来增强下拉菜单,并且希望防止单独显示默认选定的选项,则可以通过配置库的选项或自定义其行为来实现此目的。

“nice-select”库增强了原生 HTML 选择元素的外观和功能。默认情况下,它会单独显示所选选项,以提供更好的用户体验。

为了防止默认选择的选项单独显示,您可能需要自定义库的 CSS 或 JavaScript。

具体操作方法如下:

  1. CSS自定义:您可以覆盖默认样式 “nice-select”库隐藏所选选项。你可以这样做 通过定位 .nice-select 类并修改其样式以隐藏 显示所选选项。
  2. JavaScript 自定义: 您可以修改 使用 JavaScript API 的“nice-select”库。你可能需要潜水 进入库的源代码以找到适当的函数或 选项来实现这一点。寻找相关的功能或选项 显示所选选项,并查看是否可以自定义或 禁用它们。

这是您的代码,其中包含一个基本示例,说明如何使用“nice-select”并应用 CSS 来隐藏默认选定的选项:

$(document).ready(function() {
  $('select').niceSelect();
});
.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  border-radius: 5px;
  border: solid 1px #e8e8e8;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: normal;
  height: 42px;
  line-height: 40px;
  outline: none;
  padding-left: 18px;
  padding-right: 30px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  width: auto; }
  .nice-select:hover {
    border-color: #dbdbdb; }
  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: #999; }
  .nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
        -ms-transform-origin: 66% 66%;
            transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; }
  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg); }
  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); }
  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; }
    .nice-select.disabled:after {
      border-color: #cccccc; }
  .nice-select.wide {
    width: 100%; }
    .nice-select.wide .list {
      left: 0 !important;
      right: 0 !important; }
  .nice-select.right {
    float: right; }
    .nice-select.right .list {
      left: auto;
      right: 0; }
  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; }
    .nice-select.small:after {
      height: 4px;
      width: 4px; }
    .nice-select.small .option {
      line-height: 34px;
      min-height: 34px; }
  .nice-select .list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
        -ms-transform: scale(0.75) translateY(-21px);
            transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; }
    .nice-select .list:hover .option:not(:hover) {
      background-color: transparent !important; }
  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
    .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
      background-color: #f6f6f6; }
    .nice-select .option.selected {
      font-weight: bold; }
    .nice-select .option.disabled {
      background-color: transparent;
      color: #999;
      cursor: default; }

.no-csspointerevents .nice-select .list {
  display: none; 
}

.no-csspointerevents .nice-select.open .list {
  display: block; }
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.css">
</head>
<body>
    <select>
        <option data-display="Select">Nothing</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" disabled>3</option>
        <option value="4">4</option>
      </select>
      
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
</body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.