Question

我有一个通过读取外部JSON文件填充的下拉列表。一切都很好，但我希望能够在列表中选择一个名称，并在它关闭的情况下，只显示首字母。

$(document).ready(function() {
    vals = $.getJSON("data/stafflist.json", function(data) {
        data.forEach(function(e) {
          $(".initials").append('<option value="' + e.initials + '">' + e.forename + ' ' + e.surname + '</option>')
        });
    });
});

JSON文件内容：

[
    {
    "forename": "John",
    "surname": "Smith",
    "initials": "JS"
    },
    {
    "forename": "Jane",
    "surname": "Doe",
    "initials": "JD"
    }
]

的Ta。

Answer 1

以下代码对您有所帮助，

$('.initial').change(function() {
    // Display selected value
     var $value = $('.initial option:selected').val();
     $(this).find('option[value="'+$value+'"]').text($value);
});

Answer 2

当您的内容动态加载时，请按以下步骤操作：

$(document).on('change', '.initial', function(){
    // this is the value of the selected option
    console.log($(this).val());
});

下拉菜单结束时更改

2 个答案: