问题使用DropKick Javascript设置值/标签 [英] Issues Setting Value/Label Using DropKick Javascript

问题描述

我一直在使用一个名为DropKick的优雅插件，用于我的webapp http：//jamielottering.github。 com / DropKick / ，我似乎遇到了一些小问题，我不知道如何去解决它。我试图以编程方式更改选择下拉菜单的值。下面是我的问题的描述，以及JSFiddle的链接。

$ b HTML：

 < select id =startclass =timePreference> 
< option value =选择>选择< / 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，则警报将显示1，因此它会更改，但选择下拉菜单仍会显示选择。有什么建议么。我可能只是错过了一些小的，不知道。

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

解决方案

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

-phew-

因此，首先我尝试更改事件[dropkick]在下拉菜单中，但它仅适用于select和中的更改事件，而不是来自外部元素绑定。即在您的案例更改按钮中。

所以 ;这是我所做的：

解释（如果你感兴趣的话）

我使用了firebug来检查变量，发现当你使用 $（'＃timePreference选项：选中'）。val（1）; 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

如果您想使用萤火虫并查看元素如何使用此连结： http://jsfiddle.net/aNS9R/218/show/ ，并在您的检查模式中进行游戏时，您会看到dropkick造型及其工作原理。
$ p $ $（document）
$ b

JQuery代码 .ready（function（）{

$（'＃timePreference'）。dropkick（）;
$ b $（'＃go'）。click（function（）{

//将选定的选项值分配给您在此选择的选项 -
//您也可以将其设置为这样，但您现有的cdoe可以正常工作$（select_id option [value ='3'] ） .attr（选择，选择）;
$（'＃timePreference'）。val（1）;

//现在将选择文本值分配给dropkick added元素。
//如果您使用萤火虫，您可以看到不错的< div>，< ul> &安培; <李>结构可以让你的下拉变形。

$（'。dk_label'）。text（1）;

//如果您想要选择绿色，则还需进一步操作。 class = dk_option_current做那个
//你需要循环通过dropkick hierachy

$（。dk_options_inner li）。each（function（）{

如果（$（this）.text（）==1）{
$（this）.attr（'class'，'dk_option_current '）;
}
}）;

}）;
}）;



希望这可以帮助你交配，欢呼！

HTML

 < select id =timePreference> 
< option value =Chooseselected =selected>选择< / 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 =goid =gotype =buttonvalue =change/> 
 
 
  

I've been using a nice, elegant plugin called DropKick for my webapp http://jamielottering.github.com/DropKick/, and I seem to be having a slight issue with it and am not sure how to go about trying to fix it. I am trying to programmatically change the value of the select drop down menu. Below is a description of my issue, and a link to 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());

 );

When I show the value in alert, it shows as one, however when I look at the labels on the option it stays at the default or whatever it was prior to the change.

For example, if my default was "Choose" and I click someDiv, then alert will show "1", so it changing, but the select dropdown will still show "Choose". Any suggestions. I may just be missing something small, not sure.

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

解决方案

working demo : With Commnet http://jsfiddle.net/aNS9R/218/ && without comments only 7 lines needed: http://jsfiddle.net/aNS9R/220/

-phew-

So, to start with I tried Change event [of dropkick] with in drop kick but its only for the change event within select and not from external element binding. i.e. in your case change button.

So; this is what I have done:

Explanation (if you interested)

I used firebug to inspect the variable and found that dropkick marshal your existing select with nice styling now when you used $('#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 which is created by dropkick is not changed yet.

For the chosen span it has a class .dk_label and for the current (green color) is given by .dk_option_current class.

Please Note I pretty much read the plugin and figure out what is happening from here: https://github.com/JamieLottering/DropKick/blob/master/jquery.dropkick-1.0.0.js

If you wish to use firebug and see how elements are se use this link : http://jsfiddle.net/aNS9R/218/show/ and play around with your inspect mode, you will see dropkick styling and how it works.

JQuery code

 $(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');
        }
      });

    });
});
​

Hope this helps you mate, cheers!

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" />

​

这篇关于问题使用DropKick Javascript设置值/标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！