Chrome 扩展程序列表框问题答案

【问题标题】：Chrome Extension listbox issueChrome 扩展程序列表框问题
【发布时间】：2022-01-10 02:39:49
【问题描述】：

我正在尝试从我的“available_items”列表框中取出所有选定的项目，并在单击“additems”按钮时将它们移动到我的“selected_items”列表框中。我的问题是我的 JS 行为异常。我已经为此使用过代码，发现我只是无法正常运行。

清单：

{
    "manifest_version": 3,
    "name": "example script",
    "version": "0.1",
    "description": "redacted",
    "permissions": [],
    "author": "Me",
    "action": {
        "default_popup": "pop.html",
        "default_title": "redacted",
        "default_icon": {
            "16": "icon/icon16.png",
            "48": "icon/icon48.png",
            "128": "icon/icon128.png" 
        }
    },
    "icons": {
            "16": "icon/icon16.png",
            "48": "icon/icon48.png",
            "128": "icon/icon128.png" 
    }
}

HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="scripts/jquery-3.6.0.js"></script>
    <script src="scripts/helper.js"></script>
  </head>
  <body>
    <div id="header">
        <img src="img/header.png" />
    </div>
    <hr>
    <div id="item_selection">
        <select Multiple Name="available_items" Size="10" class="listbox">  
          <option>Item #1</option>  
          <option>Item #2</option>  
          <option>Item #3</option>  
          <option>Item #4</option>  
        </select>  
    </div>
    <div id="buttons">
    <br><br><br>
        <input type="button" id="additem" value="&#x1F81E;" /> <br>
        <input type="button" id="delitem" value="&#x1F81C;" />
    </div>
    <div id="items_selected">
        <select Multiple Name="selected_items" Size="10" class="listbox">  
            <option></option> 
        </select>  
    </div>


  </body>
</html>

Javascript/Jquery： -- 返回警报，下拉菜单似乎是空的。

$(document).ready(function() {

    $('#additem').click(function() {
        if ($("#available_items").find('option').length <= 1) {
            alert("dropdownlist empty");
        }
    });

});

** 为什么下拉列表显示为空？** 如果我从文档准备功能中取出所有内容并发出警报，它就会起作用。我可以通过$('#addclient').click(function(){ alert($(this).attr("value")); }); 之类的按钮提醒值，所以我知道我的代码可以看到 DOM 中的元素。如果我做一个 console.log 它不会做任何奇怪的事情。 为什么？

请帮助我解决这些问题，以便我可以完成设置代码以将项目从一个列表框移动到另一个列表框。

【问题讨论】：

不使用 $(..).click() 使用 "on" - $("#someid").on("click", function() {})
当我做$("#additem").on("click", function() { console.log('test') }) 时，我什么也得不到，所以这并不能真正帮助解决我所问的问题。此外，我什至无法console.log('test');
@ViralRathod，如果你试图在那里使用事件委托，那是行不通的。这两个 sn-ps 在逻辑上是相同的。你必须这样做$(document).on('click', '#id', function(){})。
@shadow2020，看起来您是在 HTML 之前加载脚本。您是否将事件处理程序包装在 document.ready ($(function(){})) 中？如果不是，则元素在运行时不存在。要么按照我上面的建议去做，要么把你的脚本移到正文的末尾。
两者都尝试过，没有 console.log 输出。

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

您正在尝试使用$("#available_items") 按 id 查找选择框，但您的选择框没有 id。要使用 Name 属性找到它，请使用 $("select[Name='available_items']")

以下是根据您的示例在选择框之间移动项目的示例：

$('#additem').click(function() {
  if (!$("select[Name='available_items']").has('option').length > 0) {
    alert("List is empty");
  } else if ($("select[Name='available_items']").val().length === 0) {
    alert("Select an item first");
  } else {
    $("select[Name='available_items'] option:selected")
      .remove()
      .appendTo("select[Name='selected_items']")
      .prop("selected", false)
  }
});

$('#delitem').click(function() {
  if (!$("select[Name='selected_items']").has('option').length > 0) {
    alert("List is empty");
  } else if ($("select[Name='selected_items']").val().length === 0) {
    alert("Select an item first");
  } else {
    $("select[Name='selected_items'] option:selected")
      .remove()
      .appendTo("select[Name='available_items']")
      .prop("selected", false)
  }
});

div {
  display: inline-block;
  vertical-align: middle;
}

select {
  width: 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="item_selection">
  <select Multiple Name="available_items" Size="10" class="listbox">
    <option>Item #1</option>
    <option>Item #2</option>
    <option>Item #3</option>
    <option>Item #4</option>
  </select>
</div>
<div id="buttons">
  <input type="button" id="additem" value="&#x1F81E;" /> <br>
  <input type="button" id="delitem" value="&#x1F81C;" />
</div>
<div id="items_selected">
  <select Multiple Name="selected_items" Size="10" class="listbox">
  </select>
</div>

【讨论】：