javascript - <option> 移除时更新计数器

Question

我有一个脚本，当一个项目被添加到下拉列表时，它会递增一个计数器。这工作正常。但是，如果从列表中删除该项目，我需要一种方法来减少计数器。

我正在努力寻找一种方法来使用我拥有的代码来执行此操作，如果有人可以帮助我编写代码，我将不胜感激。我正在使用 jQuery 选择的插件通过单击按钮来填充列表。我已经发布了 js，但如果您需要 HTML，我很乐意发布。只需发布 js 代码即可将帖子保持在最低限度。非常感谢。

js

$(function() {
  $(document).on('click', '#add', function() {
    var boxvalue = $("#box_input").val();

    if (boxvalue ==''){
      $("#niinputmessage").fadeIn(3000).html('No blank entries').fadeOut(5000).css({ 'color': 'red', 'margin-left': '5px', 'margin-top': '5px' });
      return false;
    }

    var count = $("#box_ni :selected").length;
    $("#counter").html("Total selected boxes for intake: " + 
    '<span style="font-size: 14px; color: white;">' + 
    '( ' + count + ' )' + 
    '</span>').css('color:, black');

    if (count > 2) {
      $("#counter").html("No more than 3 items per intake");
      return false;
    } else {
      count++;
      $("#counter").html("Total selected boxes for intake: " + 
      '<span style="font-size: 14px; color: white;">' + '( ' + count + ' )' + 
      '</span>').css('color:, black');
    }

    $("#box_ni").attr("data-placeholder", "Select boxes for intake... ");
    $("#box_ni").append("<option selected>" + boxvalue + "</option>");
    $("#box_ni").trigger("chosen:updated");
    $("#box_input").val('');
    });
  });

html

<div class="form-group">
    <label for="box_input" class="labelStyle">Enter Your Box(es)</label><br />
    <input type="text" id="box_input" name="box_input" disabled />
    <input type="button" id="add" Value="Add" disabled />
    <div id="niinputmessage"></div>
        <div class="servicesHelp"><lead id="serviceHelp" class="form-text text-muted">Please select your boxes from the list. You can select a max of 3 boxes per submission. You can select multiple boxes by holding the left ctrl on your keyboard and making your selection</lead>
        </div>
        <div class="noBrtvBoxes" style="color:white;"></div>
  </div>
  <div id="counter" style="margin-left: 7px; font-size: 14px; color: #c5ba7a;">Total selected boxes for intake: 0</div><br />
  <div class="message">
    <div class="sucMsg">

    </div>
  </div>

Answer 1

你不需要增加计数器，你可以通过以下方式获得选项的数量:

selectElement.options.length

要获取当前选择的选项，然后您可以通过按钮将其删除。

selectElement.options[selectElement.selectedIndex]

在我下面的代码中，当你通过'change'事件选择它时我只是删除它，我不能使用'click'事件，因为当你打开列表时它会删除当前的，我必须保留无用的使用户可以更改最后一个的选项。

const addBtn = document.querySelector('.add')
  const inputEl = document.querySelector('.input-box')
  const list = document.querySelector('.list')
  const counter = document.querySelector('.counter')
  const mode = document.querySelector('.mode')
  const max = 3
  let num = 0
  addBtn.addEventListener('click', e => {
    if (addBtn.disabled) {
      return false
    }
    if (inputEl.value.trim().length === 0) {
      return
    }
    addItem()
    
    updateCounter()
    resetInput()
    num+=1
    if (num >= max) {
      inputEl.disabled = true
      addBtn.disabled = true
    }
    e.preventDefault()
  })

  function updateCounter () {
    counter.textContent = list.options.length - 1
  }

  function addItem () {
    const option = document.createElement('option')
    option.value = option.text = inputEl.value.trim()
    list.appendChild(option)
  }

  function resetInput () {
    inputEl.value = ''
  }
  const warn = document.querySelector('.warn')
  mode.addEventListener('click', e => {
    if (mode.checked) {
      warn.classList.add('active')
      list.classList.add('removing')
      list.selectedIndex = 0
      list.focus()
      
    } else {
      warn.classList.remove('active')
      list.classList.remove('removing')
    }
  })

  list.addEventListener('change', e => {
    if (!mode.checked) {
      return false
    }

    if (list.selectedIndex == 0) {
      return false
    }
    const selected = list.options[list.selectedIndex]
    selected.parentNode.removeChild(selected)
    updateCounter()
    e.preventDefault()
  })

select {
    outline: none;
  }
  .view {
    margin: 0 auto;
    width: 600px;
  }
  label {
    width: 100px;
    margin-right: 5px;
  }
  .form-control {
    margin: 15px 0 15px 0;
  }

  .removing {
    border: 1px solid red;
  }

  .warn {
    visibility: hidden;
    background: red;
    color: #FFF;
  }
  .warn.active {
    visibility: visible;
  }

<div class="view">
  <form>
      <div class="form-control">
        <label>new option</label>
        <input class="input-box" type="text" placeholder="new option here">
        <button class="add">Add to options</button>
      </div>
      <div class="form-control">
        <label>All options:</label>
        <select class="list">
          <option selected="selected">All options</option>
        </select>
        <input type="checkbox" class="mode">
        <label>Removing mode</label>
        <div class="warn">click dropdown option will remove it</div>
      </div>
  </form>
  <div class="output">
    counts: <span class="counter">0</span>
  </div>
</div>