Question

我试图在select中添加一个选项值。我需要输出以大写“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'＆amp; '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

Answer 2

.prepend（）是预先添加一个dom元素。在你的情况下，只需尝试添加这样的文本，

var capacityValue = "K"+ $('select.dropdown').find(':selected').data('capacity');

更新了fiddle

Answer 3

我看到你的小提琴，我认为你没有看出前缀的作用。 capacityValue这只是属性的价值。

.prepend

描述：将参数指定的内容插入匹配元素集中每个元素的开头。

http://api.jquery.com/prepend/

capacityValue它不是元素，它是对象字符串，而不是更多。

Answer 4

将代码缩减为一行并更正了！ **

$('select.dropdown').change(function () { $('.dialogbox').val("k"+$(this).val()); });

你可以轻松实现它而无需前置方法

solution is here

Answer 5

我已更新您的小提琴，请检查here。

HTML：

<select class='dropdown' name 'dropdown'>
    <option data-selected='opts1' data-capacity='opt1' value='opt1'>Option 1</option>
    <option data-selected='opts2' data-capacity='opt2' value='opt2'>Option 2</option>
    <option data-selected='opts3' data-capacity='opt3' value='opt3'>Option 3</option>
</select>
<div class='dialogbox' title='Dialogbox'></div>
<input type="text" class="dialogbox" readonly />-->

使用Javascript：

$(document).ready(function () {

    $("div.dialogbox").dialog({
        modal: true,
        autoOpen: false
    });
    $("input.dialogbox").change(function () {
        $("div.dialogbox").dialog("open");
    });

    $('select.dropdown').change(function () {
        var capacityValue = "k".toUpperCase() +  $(this).find(':selected').data('capacity');
        $('div.dialogbox').text(capacityValue);
        $('input.dialogbox').val(capacityValue);
        $('input.dialogbox').change();

    });

});

jQuery .prepend（）不工作

5 个答案: