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

Question

我一直在为我的网络应用程序使用一个名为 DropKick 的漂亮、优雅的插件 http://jamielottering.github.com/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());

 );

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

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

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

Answer 1

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

-呸-

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

所以；这就是我所做的:

解释(如果你感兴趣的话)

我使用 firebug 检查变量，发现当您使用 $('#timePreference option:selected').val("1"); 时，dropkick 现在会以漂亮的样式编码您现有的选择dropkick 实际上确实更改了元素中带有 id=timePreference 的选定值，但由 dropkick 创建的 div 和 ul 以及 li 样式 尚未更改。

对于选定的跨度，它有一个类 .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" />

​