选项框互斥效果

最新推荐文章于 2022-08-12 22:05:47 发布

weixin_44111176

最新推荐文章于 2022-08-12 22:05:47 发布

阅读量111

点赞数

分类专栏：采坑文章标签：交互

本文链接：https://blog.csdn.net/weixin_44111176/article/details/102969702

版权

采坑专栏收录该内容

6 篇文章 0 订阅

订阅专栏

var options = [
  '123',
  '456',
  '789',
];

$('.select').on('change', function(event) {
  refreshSelect();
});

function refreshSelect() {
  var selectedValues = [];

  $('.select').each(function(index, selectElem) {
    if (selectedValues.indexOf(selectElem.value) < 0 && selectElem.value !== '') {
      selectedValues.push(selectElem.value);
    }
  });

  $('.select').each(function(index, selectElem) {

    var currentValue = selectElem.value;

    var availableOptions = options.filter(function(item) {
      return selectedValues.indexOf(item) < 0 || item === currentValue;
    });
    var optionsHtml = availableOptions.map(function(item) {
      return '<option value="' + item + '">' + item + '</option>';
    }).join('');
    $(selectElem).html('<option value="">请选择</option>' + optionsHtml);

    selectElem.value = currentValue;
  });

}

refreshSelect();