javascript - 如何在自定义选择中根据先前的选择从选择中删除一个选项？

Question

我有两个js：

一、自定义选择 https://codepen.io/wallaceerick/pen/ctsCz

$('select').each(function(){
var $this = $(this), numberOfOptions = $(this).children('option').length;

$this.addClass('select-hidden'); 
$this.wrap('<div class="select"></div>');
$this.after('<div class="select-styled"></div>');

var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());

var $list = $('<ul />', {
    'class': 'select-options'
}).insertAfter($styledSelect);

for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
        text: $this.children('option').eq(i).text(),
        rel: $this.children('option').eq(i).val()
    }).appendTo($list);
}

var $listItems = $list.children('li');

$styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.select-styled.active').not(this).each(function(){
        $(this).removeClass('active').next('ul.select-options').hide();
    });
    $(this).toggleClass('active').next('ul.select-options').toggle();
});

$listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide();
    //console.log($this.val());
});

$(document).click(function() {
    $styledSelect.removeClass('active');
    $list.hide();
});
});

第二个，用于从先前选择菜单http://jsfiddle.net/lshettyl/vrLr9wyg/中选择的选项中删除一个选项

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");

$dropdown1.change(function() {
    $dropdown2.empty().append($dropdown1.find('option').clone());
    var selectedItem = $(this).val();
    if (selectedItem) {
        $dropdown2.find('option[value="' + selectedItem + '"]').remove();
    }
});

两者都可以单独工作，但我不能将第二个合并到第一个中，我怎样才能让它们工作？

标签： javascriptjquery

Answer 1

我建议你把你的想法分解成更小的任务：

你有两组数据，它们用两个select元素表示。如果您从第一个数据集中选择一个项目，则不应从第二个数据集中选择它。

最简单的方法（我认为）是跟踪第三个对象中的选定项目，并根据存储在那里的数据过滤您的选项。

// two option arrays
const optArr1 = [
  "opt1",
  "opt2",
  "opt3",
  "opt4",
]

const optArr2 = [
  "opt1",
  "opt2",
  "opt3",
  "opt4",
]

// an object to keep track of selections
const selected = {
  first: null,
  second: null,
}

// add options
const addOptions = (optArr) => {
  let html = ''
  optArr.forEach(opt => {
    html += `<option value="${ opt }">${ opt }</option>`
  })
  return html
}

// updating displays - only needed for debugging
const updateDisplays = (selected) => {
  $('#firstSelect').html(selected.first)

  // filtering the second select's options:
  $('#second').html(addOptions(optArr2.filter(e => e !== selected.first)))
  $('#secondSelect').html(selected.second)
  $('#rawObject').html(JSON.stringify(selected))
}

jQuery(document).ready(function($) {
  // init displays
  $('#first').html(addOptions(optArr1))
  $('#second').html(addOptions(optArr2))
  $('#rawObject').html(JSON.stringify(selected))

  // click first select
  $('#first').on('input', function(e) {
    selected.first = e.target.value
    selected.second = null
    updateDisplays(selected)
  })

  // click second select
  $('#second').on('input', function(e) {
    selected.second = e.target.value
    updateDisplays(selected)
  })

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="first"></select>
<select id="second"></select>
<hr />
<div>
  FIRST SELECT: <span id="firstSelect"></span>
</div><br />
<div>
  SECOND SELECT: <span id="secondSelect"></span>
</div><br />
<div>
  THE RAW SELECTED OBJECT: <span id="rawObject"></span>
</div>