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

admin管理员组

文章数量:1391969

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

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

• javascript
• jquery
• jquery-plugins

Share Improve this question Follow edited May 18, 2014 at 21:04 Laura Ritchey 71188 silver badges2020 bronze badges asked May 16, 2014 at 13:27 user3599212user3599212 43922 gold badges66 silver badges1818 bronze badges 8

• from my code when i select General option from inames drop down then it shows only one image is atm.png in ddslicks drop down box and get value is atm. please help and i am new and save my days. – user3599212 Commented May 16, 2014 at 13:39
• Can you post the rest of your JavaScript? I'm assuming there is more, since I don't see any alerts in your JavaScript that you posted. Ideally, a fiddle with references to your additional JavaScript files (ddlslick and chained) would be particularly helpful. – Laura Ritchey Commented May 16, 2014 at 13:53
• [appelsiini/projects/chained], $('#ddslicks').ddslick({ onSelected: function(data) { displaySelectedData("Callback Function on Dropdown Selection" , data); } }); – user3599212 Commented May 16, 2014 at 14:04
• jsfiddle/thiru/Fx4ER/2 i.e jquery.ddslick.min.js this for images drop down box,remain code is html. – user3599212 Commented May 16, 2014 at 14:08
• I updated the fiddle to use external files - jsfiddle/Fx4ER/4 – Laura Ritchey Commented May 16, 2014 at 15:17

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 5

You can take this or leave it, but here is an alternative solution. It doesn't use chained, but I believe it acplishes the same functionality only using ddslick (http://jsfiddle/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./u/40036711/Images/facebook-icon-32.png"
}];

var generalData = [{
    text: "Mall",
    value: 11,
    selected: false,
    description: "Mall",
    imageSrc: "http://dl.dropbox./u/40036711/Images/facebook-icon-32.png"
}, {
    text: "Shopping Plaza",
    value: 12,
    selected: false,
    description: "Shopping Plaza",
    imageSrc: "http://dl.dropbox./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 ments below):

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

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 posed 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/lkritchey/Uw9kL/11/

本文标签：