未捕获的类型错误:没有名为 "get value" 的方法 - 使用语义 UI 获取值以进行多项选择



我想从语义ui的多选下拉设计中检索数据(下面给出的链接(。数据是使用javascript和ajax通过.js文件动态填充的。

<!-- 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>

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

$("#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元素后面添加了一个按钮,并考虑使用"select"来触发事件;点击";(点击事件处理程序(,但不知道怎么做。

更新2:下拉列表正在工作,值可以在这里检索工作下拉列表示例,但在我的工作空间中;获取值";错误,如上所示。

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

多选下拉链接-语义UI

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

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

所以,我检查了页脚html,我添加了导航栏的引导程序5js捆绑包cdn链接。我删除了引导程序链接,它成功了!

而对于上述错误是值得了解的,新的学习!希望这对其他人有帮助,因为这可能是这样的错误。

最新更新