Question

下面是我的代码，用于基于第一个选择填充第二个选择，并且我正在使用Jquery nice-select。

当我在第一select秒中选择select时，应该填充但不是。但是当我检查元素时，它会填充在select标记中，但不会加载到jquery nice-select

中

有人可以帮助我解决问题吗？我也尝试添加：

$("#edct").html(data).nice-select('refresh');

请注意，我不想使用Bootstrap-select，因为我的网站不是使用bootstrap CSS构建的。

$(document).ready(function () {
    $('select').niceSelect();
});

var eduBak = {};
eduBak['Maruti Suzuki'] = ['Delhi', 'Mumbai', 'Chennai', 'Kolkata', 'Bangalore', 'Hyderabade', 'Pune'];
eduBak['Hyundai'] = ['Alabama', 'Alaska', 'Arizona'];
eduBak['Tata'] = ['England', 'Northrn Ireland', 'Scotland', 'Wales', 'other'];
eduBak['Mahindra'] = ['Alberta ', 'Brirish Columbia', 'Manitoba', 'others'];
eduBak['Toyota'] = ['Singapore', 'others'];
eduBak['Others'] = ['Others']

$('#edu').on('change', function() {
  var edu = document.getElementById("edu");
  var model = document.getElementById("edct");
  var educ = edu.value;
  while (model.options.length) {
    model.remove(0);
  }
  var ed = eduBak[educ];
  if (ed) {
    var i;
    for (i = 0; i < ed.length; i++) {
      var e = new Option(ed[i], ed[i]);
      model.options.add(e);

    }
  }
});

.nice-select {
    border: solid 1px #CCC;
    -webkit-tap-highlight-color: transparent;
    clear: both;
    border-radius:2px;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-weight: normal;
    line-height: 36px;
    outline: none;
    padding: 0 10px !Important;
    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; 
    margin-bottom: 18px
}

.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 {
    border:1px solid #ffc107
}
.nice-select.open .list {
    border:1px solid #ffc107;
    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: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: 0;
    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: 25px;
    list-style: none;
    min-height: 25px;
    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; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.js"></script>
<div class="frm-row">
  <label>Brand</label>
  <select class="wide" id="edu">
    <option data-display="Select">Select Brand</option>
    <option>Maruti Suzuki</option>
    <option>Hyundai</option>
    <option>Tata</option>
    <option>Mahindra</option>
    <option>Toyota</option>
  </select>
</div>
<div class="frm-row">
  <label>Model</label>
  <select class="wide" id="edct">
    <option data-display="Select">Select Model</option>
  </select>
</div>

Answer 1

更改第一项选择时，还需要更新漂亮的选择

$(document).ready(function () {
    $('select').niceSelect();
});

var eduBak = {};
eduBak['Maruti Suzuki'] = ['Delhi', 'Mumbai', 'Chennai', 'Kolkata', 'Bangalore', 'Hyderabade', 'Pune'];
eduBak['Hyundai'] = ['Alabama', 'Alaska', 'Arizona'];
eduBak['Tata'] = ['England', 'Northrn Ireland', 'Scotland', 'Wales', 'other'];
eduBak['Mahindra'] = ['Alberta ', 'Brirish Columbia', 'Manitoba', 'others'];
eduBak['Toyota'] = ['Singapore', 'others'];
eduBak['Others'] = ['Others']

$('#edu').on('change', function() {
  var edu = document.getElementById("edu");
  var model = document.getElementById("edct");
  var educ = edu.value;
  while (model.options.length) {
    model.remove(0);
  }
  var ed = eduBak[educ];
  if (ed) {
    var i;
    for (i = 0; i < ed.length; i++) {
      var e = new Option(ed[i], ed[i]);
      model.options.add(e);

    }
  }
  $('select').niceSelect('update'); // add this

});

.nice-select {
    border: solid 1px #CCC;
    -webkit-tap-highlight-color: transparent;
    clear: both;
    border-radius:2px;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-weight: normal;
    line-height: 36px;
    outline: none;
    padding: 0 10px !Important;
    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; 
    margin-bottom: 18px
}

.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 {
    border:1px solid #ffc107
}
.nice-select.open .list {
    border:1px solid #ffc107;
    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: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: 0;
    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: 25px;
    list-style: none;
    min-height: 25px;
    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; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.js"></script>
<div class="frm-row">
  <label>Brand</label>
  <select class="wide" id="edu">
    <option data-display="Select">Select Brand</option>
    <option>Maruti Suzuki</option>
    <option>Hyundai</option>
    <option>Tata</option>
    <option>Mahindra</option>
    <option>Toyota</option>
  </select>
</div>
<div class="frm-row">
  <label>Model</label>
  <select class="wide" id="edct">
    <option data-display="Select">Select Model</option>
  </select>
</div>

Answer 2

您可以像这样破坏nice-select并重新初始化：

 model.niceSelect('destroy').niceSelect();

或者使用update代替：

 model.niceSelect('update');

注意：：由于您使用的是jQuery，因此无需混合原始JS，因此我将您的代码更改为100％jQuery。

$(document).ready(function() {
  $('select').niceSelect();
});

var eduBak = {};
eduBak['Maruti Suzuki'] = ['Delhi', 'Mumbai', 'Chennai', 'Kolkata', 'Bangalore', 'Hyderabade', 'Pune'];
eduBak['Hyundai'] = ['Alabama', 'Alaska', 'Arizona'];
eduBak['Tata'] = ['England', 'Northrn Ireland', 'Scotland', 'Wales', 'other'];
eduBak['Mahindra'] = ['Alberta ', 'Brirish Columbia', 'Manitoba', 'others'];
eduBak['Toyota'] = ['Singapore', 'others'];
eduBak['Others'] = ['Others']

$('#edu').on('change', function() {
  var model = $("#edct");
  var educ = $(this).val();
  var ed = eduBak[educ];

  if (ed) {
    model.empty();

    for (var i = 0; i < ed.length; i++) {
      model.append(new Option(ed[i], ed[i]));
    }
  }

  //model.niceSelect('destroy').niceSelect();
  model.niceSelect('update');
});

.nice-select {
  border: solid 1px #CCC;
  -webkit-tap-highlight-color: transparent;
  clear: both;
  border-radius: 2px;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-weight: normal;
  line-height: 36px;
  outline: none;
  padding: 0 10px !Important;
  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;
  margin-bottom: 18px
}

.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 {
  border: 1px solid #ffc107
}

.nice-select.open .list {
  border: 1px solid #ffc107;
  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: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: 0;
  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: 25px;
  list-style: none;
  min-height: 25px;
  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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.js"></script>
<div class="frm-row">
  <label>Brand</label>
  <select class="wide" id="edu">
    <option data-display="Select">Select Brand</option>
    <option>Maruti Suzuki</option>
    <option>Hyundai</option>
    <option>Tata</option>
    <option>Mahindra</option>
    <option>Toyota</option>
  </select>
</div>
<div class="frm-row">
  <label>Model</label>
  <select class="wide" id="edct">
    <option data-display="Select">Select Model</option>
  </select>
</div>

Answer 3

u应该使用

$(selector).niceSelect('update');

有关更多文档，请检查this link

无法使用jQuery Nice-Select填充第二选择

3 个答案: