问题描述
我一直在为我的 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 设置值/标签的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!