使用'dd-slick'jQuery插件对链式下拉菜单进行样式化会破坏数据的自动更新

Question

我正在使用jquery.ddslick.min.jsjQuery插件来创建带有选项图像的风格化下拉框.我还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())

Answer 1

您可以接受或留下它,但这是一个替代解决方案.它不使用链接,但我相信它只使用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"
    });
}

最有可能的是,你可以用不同的东西替换update语句 - 也许是chained.js中的一个函数？它以这种方式工作.

更新(根据以下评论):

为样式化的"文本框"启用滚动(如下面评论中所要求的)

当您使用JavaScript插件对下拉列表进行样式化时,它通常会"模拟"一个选择框,而不是真正使用HTML select元素.这意味着您在代码中的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.因此,要使其正常工作,请将CSS样式规则添加到自定义样式表中.

.dd-options {
    max-height: 200px;
}

将max-height值更改为您想要的任何值.现在你有一个滚动的,风格化的下拉框!

请参阅此处的小提琴,了解工作版本:

http://jsfiddle.net/lkritchey/Uw9kL/11/