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

Question

我一直在使用一个漂亮,优雅的插件,名为DropKick,用于我的webapp 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());

 );

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

例如,如果我的默认值为"选择"并且我点击了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/

-phew-

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

所以; 这就是我所做的:

解释(如果您有兴趣)

我使用firebug检查变量,发现当你使用$('#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 stylingdropkick创建的时候,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

您可以通过所选dropkick选项上的click事件的jQuery触发器以编程方式设置dropkick值.

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

$option.trigger("click");

这k是选择ID或名称,v是选定的值.

dropkick的click事件将自动负责设置选项类以反映更改.