使用 DropKick Javascript 设置值/标签的问题

Question

我一直在为我的 web 应用程序 http://jamielottering.github.com/DropKick/ 使用一个名为 DropKick 的漂亮、优雅的插件，但我似乎遇到了一个小问题，不知道如何尝试修复它。我正在尝试以编程方式更改选择下拉菜单的值。下面是对我的问题的描述，以及 JSFiddle 的链接。

HTML：

<select id="start" class="timePreference">
   <option value="Choose">Choose</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
</select>

jQuery：

 $('.timePreference').dropkick();

 $('#someDiv').click(function() {
    $('#start').val("1");
    alert($('#start').val());

 );

当我在警报中显示该值时，它显示为 1，但是当我查看选项上的标签时，它保持默认值或更改之前的任何值。

例如，如果我的默认设置是“Choose”并且我点击了 someDiv，那么 alert 将显示“1”，因此它会发生变化，但选择下拉菜单仍会显示“Choose”。有什么建议。我可能只是遗漏了一些小东西，不确定。

FSFiddle：http://jsfiddle.net/kdp8791/aNS9R/61/

Answer 1

工作演示：使用 Commnet http://jsfiddle.net/aNS9R/218/ && 没有 cmets 只需要 7 行：http://jsfiddle.net/aNS9R/220/

-呼-

所以，首先，我尝试使用 in drop kick 更改 [of dropkick] 事件，但它仅适用于 select 中的更改事件，不是来自外部元素绑定。 即在您的情况下更改按钮。

所以;这就是我所做的：

说明（如果您有兴趣）

我使用 firebug 检查变量，发现当您使用由 dropkick 创建的 $('#timePreference option:selected').val("1"); dropkick actually did changed the selected value with in your element with id=timePreference but the div and ul and li styling 时，dropkick 现在以漂亮的样式编组您现有的选择，但尚未更改。

对于选定的跨度，它有一个.dk_label 类，而当前（绿色）由.dk_option_current 类给出。

请注意我几乎阅读了插件并从这里弄清楚发生了什么：https://github.com/JamieLottering/DropKick/blob/master/jquery.dropkick-1.0.0.js

如果您想使用 firebug 并查看元素是如何使用此链接：http://jsfiddle.net/aNS9R/218/show/ 并使用您的检查模式，您将看到 dropkick 样式及其工作原理。

JQuery 代码

 $(document).ready(function() {

    $('#timePreference').dropkick();

    $('#go').click(function(){

        // Assign slected option value to your select here - 
        // you can also make it something like this but your existing cdoe works anyways $("select_id option[value='3']").attr('selected','selected');
        $('#timePreference').val("1");

        //Now assign the select text value to the dropkick added element.
        //If you will use firebug you can see the nice <div>, <ul> & <li> structure which morph your dropdown.

        $('.dk_label').text(1);

      // further if you want green color to be selected. class=dk_option_current does that
      // You need to loop through the dropkick hierachy

      $(".dk_options_inner li").each(function(){

        $(this).removeAttr('class');
        if ($(this).text() == "1"){
           $(this).attr('class', 'dk_option_current');
        }
      });

    });
});
​

希望这对你有帮助，干杯！

HTML

     <select id="timePreference">
        <option value="Choose" selected="selected">Choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
     </select>

    <input name="go" id="go" type="button" value="change" />

​

Answer 2

您可以通过 jQuery 触发所选 dropkick 选项上的单击事件以编程方式设置 dropkick 值。

$option = $('#dk_container_'+ k +' .dk_options a[data-dk-dropdown-value="'+ v +'"]');

$option.trigger("click");

这里k是选择的id或名称，v是选择的值。

dropkick 的 click 事件将自动处理设置选项的类以反映更改。

Answer 3

我回答这个问题有点晚了，但我最近遇到了同样的问题 - 在创建 Dropkick DDL 后更新它。我采用了 Tats_innit 的代码并对其稍作修改，创建了一个函数，让您可以简单地传入选择元素的 ID 和您想要将其更改为的值。

function updateDropkickDDL(id, value) {

    //Get the select element and dropkick container
    var select = $(id);
    var dk = select.prev('.dk_container');

    //Set the value of the select
    select.val(value);        

    //Loop through the dropkick options
    dk.find('.dk_options_inner').children("li").each(function () {

        var li = $(this);
        var link = li.children('a');

        //Remove the 'current' class if it has it
        li.removeClass('dk_option_current');

        //If the option has the value we passed in
        if (link.data('dk-dropdown-value') == value) {

            //Set the 'current' class on the option
            li.addClass('dk_option_current');

            //Set the text of the dropkick element
            dk.find('.dk_label').text(link.text());

        }

    });

}

您现在应该能够在单击按钮或类似按钮时简单地调用 updateDropkickDDL，例如，将问题中的下拉列表的值设置为 1，您将使用：

$(document).ready(function(){

    $('#start').dropkick();

    $('#someDiv').click(function(){

        updateDropkickDDL('#start', 1)

    });

}

该功能还允许在页面上使用多个dropkick下拉列表，只更新指定的下拉列表。

我希望这会帮助其他遇到此问题的人。

Answer 4

我知道这个问题已经有几个月的历史了，但是对于以后查找此问题的任何人，我想将此链接添加到 DropKick 存储库上的拉取请求中，该存储库添加了一个“反向同步”选项，该选项可以随时更新自定义下拉菜单底层选择对象发生变化。这允许您只更新代码中的选择对象，并在“更改”事件上更新 DropKick 自定义下拉菜单。

https://github.com/JamieLottering/DropKick/pull/27

Answer 5

改变价值的最佳方式
只需添加到 jquery.dropkick-X.X.X.js 之后

methods.reset = function () {
...
};

这段代码

// change value of current select
// usage: $("...").dropkick('select', select_value);
methods.select = function (value) {
for (var i = 0, l = lists.length; i < l; i++) {
  var
    listData  = lists[i].data('dropkick'),
    $dk       = listData.$dk
  ;
  if ($(this)[0] == $dk.next()[0]){
    var $current  = $($dk.find('li a[data-dk-dropdown-value="' + value + '"]')[0]).closest('li');
    $dk.find('.dk_label').text(listData.label);
    $dk.find('.dk_options_inner').animate({ scrollTop: 0 }, 0);

    _setCurrent($current, $dk);
    _updateFields($current, $dk, true);
    var data  = $dk.data('dropkick');
    var $select = data.$select;
    $select.val(value);

    if ($.browser.msie)
      $current.find('a').trigger('mousedown');
    else
      $current.find('a').trigger('click');
    break;
  }
}
};

用法：$("...").dropkick('select', select_value);

专业人士
- dropkick 对象的本机更改状态
- 更改原始选择中的选定选项
- 触发事件，如果你听“改变”状态很有用

缺点
- 需要更改原始库
- 长代码:)