使用选择列表值更新滑块

时间:2014-12-19 19:38:52

标签: javascript jquery html css

我正在使用闪烁板创建一个jquery滑块,并且滑块的内容必须根据选择列表中选择的值进行排序。 问题是,每当我在选择列表中选择一个条目时,滑块内容会发生变化但会丢失所有css样式。我认为这是因为闪烁板的初始化,但我无法弄清楚如何解决它,请帮忙。

这是我的代码:

<select id="sort" name="sort" onchange="sortSlider()">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    <option value="d">D</option>
</select>

<div class="flicker-example">
    <ul>
        <script type='text/javascript'>
            window.onload = sortSlider;
            var storeid = window.localStorage.getItem('storeid');

            function sortSlider() {
                $(".flicker-example ul li").remove();
                var selection = document.getElementById('sort').value;
                /* call the php that has the php array which is json_encoded */
                $.getJSON('http://testdb2.weby.biz/deallist.php', function(data) {
                    /* data will hold the php array as a javascript object */
                    $.each(data, function(key, val) {
                        if (val.Store_Id == storeid && val.Product_Type_Name == selection) {
                            $(".flicker-example ul").append('<li data-background="' + val.Product_Variant_Image + '"><div class="flick-title">' + val.Product_Brand_Name + '</div><div class="flick-sub-text">' + val.Product_Variant_Name + '</div></li>');
                        }
                    });

                    $('.flicker-example').flickerplate({
                        auto_flick: true,
                        auto_flick_delay: 8,
                        flick_animation: 'transform-slide'

                    });

                });

            }
        </script>
    </ul>
</div>

0 个答案:

没有答案