問題描述

我一直在為我的 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" />

?

這篇關于使用 DropKick Javascript 設置值/標簽的問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！