Question

我一直在为我的webapp 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());

 );

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

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

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

Answer 1

工作演示：使用Commnet http://jsfiddle.net/aNS9R/218/＆amp;＆amp; 没有评论只需要7行：http://jsfiddle.net/aNS9R/220/

-phew-

所以，首先我尝试使用drop kick来改变事件[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

如果您希望使用萤火虫并查看元素如何使用此链接：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

您可以通过所选dropkick选项上的click事件的jQuery触发器以编程方式设置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的代码并稍微修改了它，创建了一个函数，允许您简单地传入select元素的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对象的原生更改状态
- 更改原始选择中的所选选项
- 触发事件，如果您聆听“更改”状态，则非常有用
缺点
- 需要更改原始库 - 长代码:)

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

5 个答案: