Question

我有一个HTML列表，我想从用户选择中删除元素。我尝试使用this thread中的代码，但我的问题似乎是访问该元素。这是我的HTML：

<div id="ShipPlacement">
Ship:
<select name="shipSelec" id="shipSelec">
    <option value="aircraftCarrier">Aircraft Carrier</option>
    <option value="battleship">Battleship</option>
    <option value="cruiser">Cruiser</option>
    <option value="destroyer">Destroyer</option>
    <option value="destroyer">Destroyer</option>
    <option value="submarine">Submarine</option>
    <option value="submarine">Submarine</option>
</select>
<button type="button" onclick="placeShip()">Remove Selected Ship</button>

这是我的JavaScript：

$( document ).ready(function() {
   var shipList=document.getElementById('shipSelec');
});
function placeShip() {
  shipList.remove(shipList.options[shipList.selectedIndex].value;);
  shipList.remove(shipList.options[shipList.selectedIndex]);
  shipList.remove(shipList.options[selectedIndex]);
  shiplist.remove([shipList.selectedIndex])
}

我有remove()方法的几个实例，但它们都不起作用。但是，我可以向您传达错误的最佳方式是through JSFiddle。

Answer 1

当您在页面上加载jQuery时，使用它来绑定事件并从DOM中删除元素。

首先，使用:selected在按钮上绑定点击事件。使用remove()伪选择器从下拉列表中选择所选选项，并使用$('button').click(function() { $('#shipSelec option:selected').remove(); });将其从DOM中删除。

$(document).ready(function() {
  $('button').click(function() {
    $('#shipSelec option:selected').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
  Ship:
  <select name="shipSelec" id="shipSelec">
    <option value="aircraftCarrier">Aircraft Carrier</option>
    <option value="battleship">Battleship</option>
    <option value="cruiser">Cruiser</option>
    <option value="destroyer">Destroyer</option>
    <option value="destroyer">Destroyer</option>
    <option value="submarine">Submarine</option>
    <option value="submarine">Submarine</option>
  </select>
  <button type="button">Remove Selected Ship</button>
</div>

placeShip()

Updated Fiddle

请注意，您的代码中存在多个问题

在fiddle中，“LOAD TYPE”选项应选择为“No Wrap”。
不包括jQuery。这可以使用JavaScript选项卡中的“框架和扩展”选项
.value;); shipList附近ready的第一个语句中的语法错误
placeShip()是var shipList = document.getElementById('shipSelec'); shipList.options[shipList.selectedIndex].remove();回调的本地，因此无法从其外部访问。甚至不在{{1}}

使用纯JavaScript

{{1}}

Fiddle

Answer 2

$("#btn").click(function() {
  $("#shipSelec option:disabled").prop("disabled", false)
  $("#shipSelec option:selected").prop("disabled", true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ShipPlacement">
  Ship:
  <select name="shipSelec" id="shipSelec">
    <option value="aircraftCarrier">Aircraft Carrier</option>
    <option value="battleship">Battleship</option>
    <option value="cruiser">Cruiser</option>
    <option value="destroyer">Destroyer</option>
    <option value="destroyer">Destroyer</option>
    <option value="submarine">Submarine</option>
    <option value="submarine">Submarine</option>
  </select>
  <button type="button" id="btn">Remove Selected Ship</button>

我建议您暂停选项，不要删除

使用JavaScript删除下拉列表中的选定值

2 个答案: