未捕获的类型错误:没有名为"Get Value的方法-使用多项选择的语义用户界面获取值

2022-06-17 00:00:00 django jquery javascript html semantic-ui

我想从语义用户界面(链接如下)的多选下拉设计中检索数据。 数据是使用.js文件使用javascript和AJAX动态填充的。

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- semantic UI -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<form id="compare-form" class="ui form small">
    {% csrf_token %}
    <div class="d-flex justify-content-center">
            <div class="me-2 flex-fill" id="business_units" style="width:320px;">
                  <input type="hidden" name="business_unit">
                  <select name="business-unit" multiple="" class="ui loading fluid dropdown buclass" id="business_unit-data-box">
                      <!-- Dynamically populating options here using JS -->
                      <option id="business_unit-text" value="">Choose a business unit</option>
                  </select>
            </div>
            <br>
            <div class="me-3 flex-fill">
                <button name="Fetch SPs" type="button" class="btn btn-primary" id="fetchsp" style="width:120px;">
                    Fetch SPs
                </button>
            </div>
    </div>
</form>

我可以看到如何使用jQuery在HTML文件中已有选项时获取数据,如下所示:

$("#multi-select").dropdown("get value") 

但由于我的选项是动态加载的,这不起作用,出现以下错误:

dropdown.js:364 Uncaught TypeError: No method named "get value"
    at Function.dropdownInterface (dropdown.js:364)
    at HTMLSelectElement.<anonymous> (dropdown.js:373)
    at Function.each (VM84186 jquery-3.5.1.min.js:2)
    at S.fn.init.each (VM84186 jquery-3.5.1.min.js:2)
    at S.fn.init.jQueryInterface [as dropdown] (dropdown.js:372)
    at HTMLButtonElement.<anonymous> (<anonymous>:3:48)
    at HTMLButtonElement.dispatch (VM84186 jquery-3.5.1.min.js:2)
    at HTMLButtonElement.v.handle (VM84186 jquery-3.5.1.min.js:2)

为方便起见,我在‘SELECT’DOM元素后添加了一个按钮,并考虑使用&Quot;Click&Quot;(单击事件处理程序)来触发事件,但想不出如何触发。

更新2:DropDown正在工作,可以在此处Working Dropdown Sample检索值,但在我的工作区中,获取";获取值&q;错误如上所示。

更新3:当我使用Django框架时,这是在pycharm环境中发生的。如果我编写一个简单的HTML,它在没有任何框架的情况下工作得很好。

Multiple Selection Dropdown link - Semantic UI


解决方案

我在我的html文件中运行了试错方法,并观察到当我删除3行以下时,从下拉列表中捕获值起作用。

{% extends "base.html" %}
{% load static %}

{% block content %}
所以,我检查了页脚html,我为导航添加了bootstrap 5 js捆绑包CDN链接。我删除了引导链接,它起作用了!

对于上述错误是值得了解的,新的学习!希望这将对其他人有所帮助,因为这可以成为此类错误的案例。

相关文章