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

2022-01-11 00:00:00 jquery jquery-plugins javascript html

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

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());

 );

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

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.

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

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/

推荐答案

工作演示 : With Commnet http://jsfiddle.net/aNS9R/218/ &&无注释只需要 7 行:http://jsfiddle.net/aNS9R/220/

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

-呼-

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

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:

说明(如果您有兴趣)

我使用 firebug 检查变量，发现当你使用 $('#timePreference option:selected').val("1");dropkick 实际上确实使用 id=timePreference 在您的元素中更改了所选值，但由 dropkick 创建的 div 和 ul 和 li 样式 尚未更改.

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.

对于选择的跨度，它有一个类 .dk_label 并且对于当前(绿色)由 .dk_option_current 类给出.

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

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

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

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

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 代码

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

​

相关文章