javascript - 使用 jQuery 从下拉菜单中删除项目不起作用

Question

我在这里找到了几个关于从下拉 HTML 元素中删除项目的主题。但是，当我尝试它时，它从脚本中失败，但在浏览器的控制台中工作。

脚本的其余部分工作正常，并且没有返回任何错误。首先，我有一个包含项目文本的变量，我让 jQuery 获取相应的值，然后使用该值删除该项目。

var topicToDelete = "topic3";
console.log(topicToDelete); //returns "topic3"
var dropdownValue = $('#pick_topic option').filter(function() {
  return $(this).html() == topicToDelete;
}).val();
console.log(dropdownValue); //returns nothing
$('#pick_topic').find('option[value=' + dropdownValue + ']').remove(); //doesn't do anything

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pick_topic">
  <option value="1">topic1</option>
  <option value="2">topic2</option>
  <option value="3">topic3</option>
</select>

直接执行代码也不起作用:

$('#pick_topic option').filter(function () { return $(this).html() == topicToDelete; }).remove(); // nothing

但是，当我在浏览器控制台中逐行输入行时，它会起作用，并且该项目将从下拉菜单中删除。怎么会这样？

我还调查了 this回答。

Answer 1

问题是因为您在 id 属性的值中放入了 #，因此您的 jQuery 选择器不匹配任何内容。这应该被删除。

var topicToDelete = "topic3";
//console.log(topicToDelete); //returns "topic3"

var dropdownValue = $('#pick_topic option').filter(function() {
  return $(this).html() == topicToDelete;
}).val();

//console.log(dropdownValue); //returns nothing
$('#pick_topic').find('option[value=' + dropdownValue + ']').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pick_topic"> <!-- note: no # here -->
  <option value="1">topic1</option>
  <option value="2">topic2</option>
  <option value="3">topic3</option>
</select>

话虽如此，您的解决方案过于复杂化了。 filter() 返回一个可以直接删除的 jQuery 对象。无需从该对象获取值，然后创建另一个指向您已有权访问的 Element 的 jQuery 对象。试试这个:

var topicToDelete = "topic3";

$('#pick_topic option').filter(function() {
  return $(this).html() == topicToDelete;
}).remove();

// alternative, using :contains which is a greedy match:
// $('#pick_topic option:contains(' + topicToDelete + ')').remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pick_topic">
  <option value="1">topic1</option>
  <option value="2">topic2</option>
  <option value="3">topic3</option>
</select>