- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 Kendo 组合框,有两个值:Main、Secondary。我还有一个链接到数据源的 Kendo mutliselect。默认情况下,组合框显示“Main”,多选显示“Parent1”、“Parent2”,即数据源的“名称”字段。
如果用户从组合框中选择“Secondary”,我想动态地将多选的 dataTextField 更改为 Name2,类似地,当用户从组合框中选择“Main”时,多选应链接到“Name”作为其 dataTextField下拉。
这是Fiddle
HTML
<select id="CategoryOption" style="width: 100px;">
<option>Main</option>
<option>Secondary</option>
</select> <br><br><br><br><br><br>
<select id="MainCategory" style="width: 90%;"></select>
Java 脚本
createCategoryOption("#CategoryOption");
createMainCategory("#MainCategory", "Name", "ID");
function createCategoryOption(divID1)
{
$(divID1).kendoComboBox({
change: function (e) {
SetSelectServicesText();
}
});
}
function createMainCategory(usersDiv, textField, valueField) {
$("#MainCategory").kendoMultiSelect({
dataSource: [
{ Name: "Parent1", Id: 1, Name2: "Child1" },
{ Name: "Parent2", Id: 2, Name2: "Child2" }
],
dataTextField: textField,
dataValueField: valueField
});
}
function SetSelectServicesText()
{
if($("#CategoryOption").data("kendoComboBox").value() == "Main")
{
$("#MainCategory").destroy();
createMainCategory("#MainCategory", "Name", "ID");
}
else
{
$("#MainCategory").destroy();
createMainCategory("#MainCategory", "Name2", "ID");
}
}
外部来源
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
最佳答案
Kendo 小部件通常会在目标元素周围创建一个包装结构,该结构不会被方法destroy()
破坏(我使用的是认为这是一件坏事)。
所以销毁(或从 DOM 中删除)一个小部件并不是那么简单。检查一下:
function createMainCategory(usersDiv, textField, valueField, remove)
{
var mc = $("#MainCategory");
if (remove)
{
// Destroys the widget
mc.data("kendoMultiSelect").destroy();
// Get the widget wrapper element structure
var p = mc.closest(".k-widget");
// Detache the #MainCategory from the wrapper structure
mc = mc.empty().detach();
// Remove the wrapper structure
p.remove();
// Append the #MainCategory to the body again
$('body').append(mc);
}
$("#MainCategory").kendoMultiSelect({
dataSource: [
{ Name: "Parent1", Id: 1, Name2: "Child1" },
{ Name: "Parent2", Id: 2, Name2: "Child2" }
],
dataTextField: textField,
dataValueField: valueField
});
}
如您所见,在删除中阻止它...
destroy()
销毁小部件;#MainCategory
包装器外部(detach()
删除但返回其引用以进一步操作元素);#MainCategory
安全,它 removes来自 DOM 的整个结构的包装器;#MainCategory
以用于托管新的小部件。Fiddle .
关于javascript - 动态更改 Kendo MultiSelect 的 DataTextField,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29973184/
所以我有一个带有 x 值的多选框,我需要能够将其移动到另一个多选框,反之亦然。 Volvo Saab Mercedes Audi 需要通过单击按钮将 boxa 的全部或一个值移
我有多选微调器,但是当我选择一个微调器时,微调器关闭了。我想选择几件事。这是我的代码: protected void onCreate(Bundle savedInstanceState) {
我想使用 Bootstrap 多选插件:Bootstrap Multiselect 但这对我不起作用。 $(document).ready(function(){ $('#doc_1')
我有一个页面,我在其中使用 Handlebars 一个接一个地填充两个表单元素。两种形式都有 Bootstrap 多选。 我要开火 $('.multiselect').multiselect() 在呈
我正在尝试检测 JQuery MultiSelect 上的更改以触发另一个位置的更新。更改内容上的普通 javascript 不起作用,因为选择不会更改。我发现了一个名为“beforeclose”的方
我有两个多选框,在更改第一个选择框时,我想禁用第二个选择框的某些组。 我正在使用多选插件的以下代码 onChange 函数 $('optgroup[label=MyGroup2]').prop
我正在使用 Bootstrap-Multiselect ( http://davidstutz.github.io/bootstrap-multiselect/ ) 我有两个下拉列表,当在一个下拉列表
我正在尝试将参数传递给 Vue.js 中的 @select 事件函数 HTML Products
如何在 jquery mutiselect 上调用 onblur 方法?就像在我的多选中一样,如果用户选择红色和绿色,那么我有以下值,然后基于此我需要从数据库获取数据 blue re
我有一个问题,我只知道 jQuery 的基础知识,我需要使用 JavaScript 获取有关列表中所选选项的信息,我浪费了 2 天寻找一个好的方法,但没有成功,请帮助.. 。MultiSelect 的
我有一个表单,其中有 2 个用于依赖列表的选择框。 我正在根据第一个列表中选择的值加载第二个列表,这是多选的。 a value b value c value 对于添加
我试图在我的 jquery 多选中使用 javascript 动态生成选项值。 function prova(data){ var t = 0; var tmp = new A
我想在我的表单中创建一个多选国家/地区下拉列表,让用户可以选择多个国家/地区,并且还可以在需要时删除他们选择的项目。 我可以创建一个下拉列表,从 mysql 表中提取国家名称,但它只允许用户选择一个国
我正在尝试更改 Jquery multiselet 下拉列表的字体大小和宽度,但我找不到如何更改。我正在使用这个 http://www.erichynds.com/blog/jquery-ui-mul
如果看到jqGrid演示: http://www.trirand.com/blog/jqgrid/jqgrid.html 部分:高级->多选 当我移至下一页时,您会看到选中的复选框未保留,并且 再次返
我正在尝试在我的 Bootstrap 多选对象上设置搜索栏。问题是我不知道如何使用 javascript 选项。 我正在使用本教程:www.htmluse.com/bootstrap-multisel
我正在参与一个电子学习项目,并致力于大规模预科类(class)部分。我使用搜索框查找学生的姓名,并将这些值添加到列表中。当我尝试查找其他学生的姓名并将这些值添加到现有列表中时,就会出现问题。这部分会重
我正在使用 Bootstrap Multiselect ( https://github.com/davidstutz/bootstrap-multiselect )。这是一个很棒的组件,但我遇到了下
我的 webpack 配置指定了许多要构建到 vendors.js 中的节点模块。所有模块均随 npm 安装,并驻留在父文件夹 node_modules 中。 文件夹结构: app/scripts/a
我使用 Kendo UI 中的多选。我想知道当用户从多选中删除项目时是否有任何方法可以触发功能。到目前为止,我知道触发了“更改”事件,但它太笼统了,我找不到有关用户删除内容的任何信息。或者有吗? 最佳
我是一名优秀的程序员,十分优秀!