使用 DropKick Javascript 设置值/标签的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9857771/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issues Setting Value/Label Using DropKick Javascript
提问by kp_
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.
我一直在为我的 web 应用程序http://jamielottering.github.com/DropKick/使用一个名为 DropKick 的漂亮、优雅的插件，我似乎遇到了一个小问题，不知道如何着手修复它。我正在尝试以编程方式更改选择下拉菜单的值。下面是对我的问题的描述，以及指向 JSFiddle 的链接。
HTML:
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:
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.
当我在警报中显示值时，它显示为 1，但是当我查看选项上的标签时，它保持默认值或更改之前的任何值。
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.
例如，如果我的默认值是“选择”并且我单击 someDiv，则警报将显示“1”，因此它会更改，但选择下拉列表仍将显示“选择”。有什么建议。我可能只是遗漏了一些小东西，不确定。
FSFiddle: http://jsfiddle.net/kdp8791/aNS9R/61/
FSFiddle：http: //jsfiddle.net/kdp8791/aNS9R/61/
回答by Tats_innit
working demo: With Commnethttp://jsfiddle.net/aNS9R/218/&& without commentsonly 7 lines needed: http://jsfiddle.net/aNS9R/220/
工作演示：使用 Commnet http://jsfiddle.net/aNS9R/218/&&没有评论只需要 7 行：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.
因此，首先我尝试使用 drop kick 更改事件 [of dropkick] 但它仅适用于 select 中的更改事件，而不是来自外部元素绑定的更改事件。即在您的情况下更改按钮。
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 stylingwhich is created by dropkick is not changed yet.
我使用 firebug 检查变量，发现 dropkick 现在使用漂亮的样式编组您现有的选择，当您使用$('#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由 dropkick 创建的尚未更改时。
For the chosen span it has a class .dk_labeland for the current (green color) is given by .dk_option_currentclass.
对于选定的跨度，它有一个类.dk_label，而当前（绿色）由.dk_option_current类给出。
Please NoteI 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
请注意，我几乎阅读了插件并从这里弄清楚发生了什么：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.
如果您想使用 firebug 并查看元素如何使用此链接：http: //jsfiddle.net/aNS9R/218/show/并使用您的检查模式，您将看到 dropkick 样式及其工作原理。
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
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" />
?
回答by catimos
You can set the dropkick value programmatically by jQuery trigger of a click event on the selected dropkick option.
您可以通过选定 dropkick 选项上的单击事件的 jQuery 触发器以编程方式设置 dropkick 值。
$option = $('#dk_container_'+ k +' .dk_options a[data-dk-dropdown-value="'+ v +'"]');
$option.trigger("click");
Here kis the select id or name, and vis the selected value.
这里k是选择 id 或名称，v是选择的值。
The click event of dropkick will automatically take care of setting the classes of options to reflect the change.
dropkick 的点击事件将自动负责设置选项的类别以反映更改。
回答by patg
I'm a bit late answering this but I have recently come across the same issue - updating a Dropkick DDL after it has been created. I have taken Tats_innit's code and modified it slightly, creating a function that allows you to simply pass in the ID of the select element and the value you want to change it to.
我回答这个问题有点晚了，但我最近遇到了同样的问题 - 在创建 Dropkick DDL 后更新它。我采用了 Tats_innit 的代码并对其稍作修改，创建了一个函数，该函数允许您简单地传入 select 元素的 ID 和您想要将其更改为的值。
function updateDropkickDDL(id, value) {
//Get the select element and dropkick container
var select = $(id);
var dk = select.prev('.dk_container');
//Set the value of the select
select.val(value);
//Loop through the dropkick options
dk.find('.dk_options_inner').children("li").each(function () {
var li = $(this);
var link = li.children('a');
//Remove the 'current' class if it has it
li.removeClass('dk_option_current');
//If the option has the value we passed in
if (link.data('dk-dropdown-value') == value) {
//Set the 'current' class on the option
li.addClass('dk_option_current');
//Set the text of the dropkick element
dk.find('.dk_label').text(link.text());
}
});
}
You should now be able to simply call updateDropkickDDL on the click of a button or similar, for example, to set the value of the dropdown in your question to 1 you would use:
您现在应该能够在单击按钮或类似按钮时简单地调用 updateDropkickDDL，例如，将问题中下拉列表的值设置为 1，您将使用：
$(document).ready(function(){
$('#start').dropkick();
$('#someDiv').click(function(){
updateDropkickDDL('#start', 1)
});
}
This function also allows the use of multiple dropkick dropdown lists on the page, only updating the specified dropdown.
此功能还允许在页面上使用多个 dropkick 下拉列表，仅更新指定的下拉列表。
I hope this will help someone else encountering this issue.
我希望这会帮助其他人遇到这个问题。
回答by LocalPCGuy
I know this question is a few months old, but for anyone looking this up later I wanted to add this link to a pull request on the DropKick repository that adds in a "reverse sync" option that updates the custom dropdown menu whenever the underlying select object changes. That allows you to just update the select object in your code and the DropKick custom dropdown updates on the "change" event.
我知道这个问题已经有几个月的历史了，但是对于稍后查找此问题的任何人，我想将此链接添加到 DropKick 存储库上的拉取请求中，该请求添加了“反向同步”选项，该选项在底层选择时更新自定义下拉菜单对象变化。这允许您只更新代码中的选择对象，并在“更改”事件上更新 DropKick 自定义下拉列表。
回答by iscariot
best way to change value
just add to jquery.dropkick-X.X.X.jsafter
更改值的最佳方法
只需添加到jquery.dropkick-XXXjs之后
methods.reset = function () {
...
};
this code
这段代码
// change value of current select
// usage: $("...").dropkick('select', select_value);
methods.select = function (value) {
for (var i = 0, l = lists.length; i < l; i++) {
var
listData = lists[i].data('dropkick'),
$dk = listData.$dk
;
if ($(this)[0] == $dk.next()[0]){
var $current = $($dk.find('li a[data-dk-dropdown-value="' + value + '"]')[0]).closest('li');
$dk.find('.dk_label').text(listData.label);
$dk.find('.dk_options_inner').animate({ scrollTop: 0 }, 0);
_setCurrent($current, $dk);
_updateFields($current, $dk, true);
var data = $dk.data('dropkick');
var $select = data.$select;
$select.val(value);
if ($.browser.msie)
$current.find('a').trigger('mousedown');
else
$current.find('a').trigger('click');
break;
}
}
};
usage: $("...").dropkick('select', select_value);
用法：$("...").dropkick('select', select_value);
pros
- native change state of dropkick object
- change selected option in original select
- trigger event, useful if you listen "change" state
cons
- need to change original library
- long code :)
优点
- dropkick 对象的本机更改状态
- 更改原始选择中的选定选项
- 触发事件，如果您听“更改”状态很有用
缺点
- 需要更改原始库
- 长代码 :)
