使用'dd-slick'jQuery插件破坏了数据的自动更新
Stylizing chained drop-downs with 'dd-slick' jQuery plugin breaks auto-update of data
我使用jquery.ddslick.min.js
jQuery插件为选项创建带有图像的样式化下拉框。我还使用jquery.chained.min.js
根据第一个下拉框中选择的值自动更新第二个选择框中的数据。
我的要求是:
- 样式化下拉框以允许在选项 中使用图像
- 根据第一个下拉框中选择的选项自动更新第二个下拉框中的数据。
- 触发警报,显示所选选项的值
- 提供下拉框的滚动功能
目前,当我在第一个选择框中选择一个选项时,第二个选择框中的项不会更新。我也有麻烦触发警报时选择一个选项;滚动功能也不能正常工作。
HTML:<select id="inames">
<option value="">-slect place-</option>
<option value="Utilities">Utilities</option>
<option value="Emergency Services">Emergency Services</option>
<option value="General">General</option>
</select>
<select id="ddslicks" >
<option data-imagesrc="../css/PoiImages/airport.png" class="Utilities" value="airport"></option>
<option data-imagesrc="../css/PoiImages/ambulance.png" class="Utilities" value="ambulance"></option>
<option data-imagesrc="../css/PoiImages/atm.png" class="General" value="atm"></option>
<!-- _ _ etc -->
</select>
JavaScript: $("#ddslicks").chainedTo("#inames"); /* or $("#series").chainedTo("#mark"); */
当我添加一个警报时,我也会遇到问题。
alert($('#ddslicks').val())
你可以接受也可以不接受,但这里有另一种解决方案。它不使用链接,但我相信它只使用ddslick (http://jsfiddle.net/lkritchey/Uw9kL/2/)就能实现相同的功能。
我使用的方法接受JSON数据(您可以手动创建或使用web服务)。它使用了ddslick的数据特性(注意,我只使用了示例数据)。另外,请注意,我只输入了公用事业和通用的数据(因此您不会看到紧急服务的任何数据)。
var categoryData = [{
text: "Utilities",
value: 1,
selected: false,
description: "Utilities"
}, {
text: "Emergency Services",
value: 2,
selected: false,
description: "Emergency Services"
}, {
text: "General",
value: 3,
selected: false,
description: "General"
}];
var utilitiesData = [{
text: "Airport",
value: 1,
selected: false,
description: "Airport",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
}];
var generalData = [{
text: "Mall",
value: 11,
selected: false,
description: "Mall",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/facebook-icon-32.png"
}, {
text: "Shopping Plaza",
value: 12,
selected: false,
description: "Shopping Plaza",
imageSrc: "http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
}];
修改第二个下拉框数据的代码如下:
$('#inames').ddslick({
data: categoryData,
width: 300,
imagePosition: "left",
selectText: "Select a place",
onSelected: function (data) {
updateDropDown(data.selectedData.value);
}
});
$("#ddslicks").ddslick({width: 300,
imagePosition: "left",
selectText: "Select"});
function updateDropDown(value) {
var newData;
if (value == 1) {
newData = utilitiesData;
} else {
newData = generalData;
}
$('#ddslicks').ddslick("destroy");
$("#ddslicks").empty();
$("#ddslicks").ddslick({
data: newData,
width: 300,
imagePosition: "left",
selectText: "Select"
});
}
最有可能的是,你可以用不同的东西替换更新语句-也许是一个函数在chained.js?它是这样工作的。
UPDATE(基于下面的注释):
为样式化的"文本框"启用滚动(如下面的评论所要求)
当你使用JavaScript插件来样式化下拉菜单时,它通常会"模拟"一个选择框,而不是真正使用HTML选择元素。这意味着您在代码中的select元素上放置的选项通常不会在呈现的代码中被捕获,除非它是内置于插件中的东西。这就是插件ddslick的情况。
下面是下拉框的渲染代码:
<div id="inames" class="dd-container" style="width: 300px;">
<div class="dd-select" style="width: 300px; background: none repeat scroll 0% 0% rgb(238, 238, 238);">
<input class="dd-selected-value" type="hidden"> <a class="dd-selected">Select a place</a>
<span class="dd-pointer dd-pointer-down"></span>
</div>
<ul class="dd-options dd-click-off-close" style="width: 300px;">
<li> <a class="dd-option">
<input class="dd-option-value" type="hidden" value="1">
<label class="dd-option-text">Utilities</label >
<small class = "dd-option-description dd-desc"> Utilities</small>
</a>
</li>
<li> <a class="dd-option">
<input class="dd-option-value" type="hidden" value="2">
<label class="dd-option-text">Emergency Services</label >
<small class = "dd-option-description dd-desc" > Emergency Services </small>
</a>
</li>
<li>
<a class="dd-option">
<input class="dd-option-value" type="hidden" value="3">
<label class="dd-option-text">General</label > < small class = "dd-option-description dd-desc" > General </mall>
</a>
</li>
</ul>
</div>
<div id="ddslicks" class="dd-container" style="width: 300px;">
<div class="dd-select" style="width: 300px; background: none repeat scroll 0% 0% rgb(238, 238, 238);">
<input class="dd-selected-value" type="hidden">
<a class="dd-selected">Select</a > <span class = "dd-pointer dd-pointer-down" > </span>
</div>
<ul class="dd-options dd-click-off-close" style="width: 300px;"></ul>
</div>
如果您查看代码,您将看到没有列出任何选择元素。相反,"选择框"由一个div组成,其中嵌入了一个无序列表(列表项周围有一个链接)。
"下拉选项"周围的元素是dd-options
。如果想在无序列表中添加滚动,该怎么做?给CSS添加一个max-height。因此,要使其正常工作,请向自定义样式表添加一个CSS样式规则。
.dd-options {
max-height: 200px;
}
将max-height
值更改为您想要的值。现在你有了一个滚动的、有风格的下拉框!
请参阅此处查看工作版本:
http://jsfiddle.net/lkritchey/Uw9kL/11/- 更新数据,而不是用javascript和jquery将其添加到我的表中
- JQGrid使用服务器编辑后的更新数据刷新数据
- 使用odata 4的jaydata 1.5和保存/更新数据时的错误
- 使用引导时间选取器时,没有更新数据ng模型值
- AngularJS中超时后没有更新数据
- jQuery动态更新数据键和值
- 在简单的可重用 D3 图表中更新数据
- Node/Express 无法正确更新数据模型
- 如何在jQuery中的单个保存按钮上更新数据和添加数据
- 如何使用Jquery更新数据确认属性中的消息
- 更新数据后保留D3图的位置
- 使用$watch更新数据,ng重复不反映更改
- 在OpenCart中,我们如何实时更新数据
- 表单在每个页面中 - 仅在特定页面上处理它 - 如果当前不在页面上 - 重定向 - 否则 - 使用 AJAX 更新数据
- 调整窗口大小时更新数据属性
- Firebase赢得't更新数据
- Rails和jQuery-尝试使用setTimeout主动更新数据
- Lawnchair.js未更新数据
- 更新数据时的React.js生命周期
- enter() 和 exit() 如何检测 D3 中的更新数据