javascript - jQuery .prepend() 不工作

Question

我正在尝试从选择中添加一个选项值。我需要输出以大写“K”开头。这是我的 jQuery:

    $(document).ready(function () {
$(".dialogbox").dialog({
    modal: true,
    autoOpen: false
});
$(".dropdown").change(function () {
    $(".dialogbox").dialog("open");
    $(".dialogbox").change("puff");
});
$('select.dropdown').change(function () {
    var capacityValue = $('select.dropdown').find(':selected').data('capacity').toUpperCase();   
    $('.dialogbox').val(capacityValue);
});

});

这是我的 fiddle

我已经尝试过

$('.dialogbox').val(capacityValue).prepend( 'K' );

但这似乎不起作用。我见过的所有例子都表明这应该可行。先谢谢您的帮助。

Answer 1

您的代码存在很多问题:

(1) .prepend() 用于将一个元素作为另一个元素的子元素添加到前面。您正试图在字符串上调用它。我认为你想使用字符串连接:

"K" + $('select.dropdown').find(':selected').data('capacity')

(2) 您的 html 中缺少下拉列表的“name”属性的 =:

<select class='dropdown' name='dropdown'>

(3) 您有两个带有 class="dialogbox" 的元素，因此以下内容将打开两个对话框:

$(".dialogbox").dialog("open");

您可以使用两个不同的类名，或者在选择器中包含元素类型以区分它们:'div.dialogbox' 和 'input.dialogbox'

(4) 您正在将两个 change 事件处理程序附加到下拉列表。无法保证它们的调用顺序。您应该将它们合二为一。

(5) 您应该使用 .text() 或 .html() 将文本插入元素，而不是 .val() >。仅使用 .val() 设置输入元素的值。

(6) 您可以通过包含 show 选项来建立对话框打开的动画效果:

show: 'puff'

或者:

show: { effect: 'puff', duration: 1000 }

<小时/>

尝试以下操作:

$(".dropdown").change(function () {
    var capacityValue = "K" +  $(this).find(':selected').data('capacity').toUpperCase();

    $('div.dialogbox').text(capacityValue).dialog("open");

    $('input.dialogbox').val(capacityValue);
});

jsfiddle