Stylizing chained drop-downs with 'dd-slick' jQuery plugin breaks auto-update of data

Question

I am using jquery.ddslick.min.js jQuery plug-in to create stylized drop-down boxes with images for the options. I also am using jquery.chained.min.js to auto-update the data in the second select box based on the value selected in the first drop-down.

My requirements are:

• Stylize drop-down boxes to allow images to be used in the options
• Automatically update the data in the second drop-down box based on the option chosen in the first.
• Trigger an alert displaying the value of the option chosen
• Provide scrolling capability of drop-down boxes

Currently, items are not updated in the second select box when I choose an option in the first. I also am having trouble triggering the alert upon selecting an option; the scroll functionality also is not working properly.

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"); */

I also get problems when I add an alert.

alert($('#ddslicks').val())

Answer 1

You can take this or leave it, but here is an alternative solution. It doesn't use chained, but I believe it accomplishes the same functionality only using ddslick (http://jsfiddle.net/lkritchey/Uw9kL/2/).

The method I used takes in JSON data (you can create it manually or use a web service). It uses the data feature of ddslick (note that I just used sample data). Also, note that I only put in data for Utilities and General (so you won't see anything with Emergency Services).

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"
}];

The code to change the data for the second drop-down box is as follows:

$('#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"
    });
}

Most likely, you could replace the update statement with something different - maybe a function in the chained.js? It works this way though.

UPDATE (based on comments below):

To enable scrolling for a stylized 'Text Box' (as requested below in the comments)

When you use a JavaScript plug-in to stylize a drop down, it often 'emulates' a select box and isn't really using the HTML select element. This means the options you put on the select element in your code often is not captured in the rendered code, unless it is something built into the plug-in. This is the case with the plug-in ddslick.

Below is the rendered code for the drop down box:

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

If you look at the code, you'll see that there aren't any select elements listed. Instead, the 'select box' is composed of a div, with an unordered list (with a link surrounding the list items) embedded in it.

The element surrounding the 'drop down options' is dd-options. If you want to add scrolling to an unordered list, what do you do? You add a max-height to the CSS. Therefore, to make this work properly, add a CSS style rule to your custom stylesheet.

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

Change the max-height value to whatever you want. Now you have a scrolling, stylized drop-down box!

See the fiddle here for a working version:

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