Question

如何在不更改选项中的文本的情况下更改下拉列表的选定文本？例如：如果下拉列表中包含代码和描述，但在选择中我只想显示代码并删除描述，但描述应该出现在下拉列表中。

在下拉列表中填充数据：

$.each(jtc12_2_2_reasoncode1List, function(i, item) {
            $('#jtc12_2_reasonForFailure1').append($('<option>', {
                value : item.Code,
                text : item.Code + " " + item.Description
            }));
        });

更改所选选项的文本：

 var jtc12_2_2_reasonCode1Code = $("#jtc12_2_reasonForFailure1 :selected").val();
        var jtc12_2_2_reasonCode1Desc = _.filter(e.data.jtc12_2_2_reasonCode1List, function(item) {
            return item.Code === jtc12_2_2_reasonCode1Code;
        });
        jtc12_2_2_reasonCode1Desc = jtc12_2_2_reasonCode1Desc[0].Description;
        $("#jtc12_2_reasonForFailure1 option[value = " + jtc12_2_2_reasonCode1Code + "]").text(jtc12_2_2_reasonCode1Code);

Answer 1

实现此目的的一种方法是在运行时添加新选项并选择（新添加的）值而不是选定的值。然后，可以在下拉列表的点击事件中删除所选值。

假设代码和描述用冒号（:)分隔，请参考以下代码。

var onSelect = false;
$('select').click(function (e) {


    if ($(this).val() !== '' && !onSelect) {
        $(this).find('option:selected').remove();
    } else {

        onSelect = false;
    }
});

$('select').change(function (e) {

    var selectedVal = $(this).val();
    var newVal = selectedVal.split(':')[0];
    $(this).append($('<option>', {
        value: newVal,
        text: newVal
    }));

    $(this).val(newVal);
    $(this).find('option:selected').hide();
    onSelect = true;
});

jsFiddle

更改下拉列表的选定文本而不更改选项中的文本？

1 个答案: