我们可以在选择框下拉框中同时显示两个值吗?

Question

图片参考我想在一个选择框中显示两个值我的代码:-

<mat-label for="property">Select property</mat-label>
<mat-select class="form-control" formControlName="property" id="property" disableOptionCentering
panelClass="matSelect-class">
<option value="" selected> -Select option- </option>
<mat-option [value]="item.id">
<span class="dropdown-name">Name</span>
<span class="dropdown-address">address</span>
</mat-option>
</mat-select>

Answer 1

如何将描述放在属性中，例如title?

$(function(){
$("select").select2({
templateResult: formatOption
});

function formatOption (option) {
var $option = $(
'<div><strong>' + option.text + '</strong></div><div>' + option.title + '</div>'
);
return $option;
};
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<select style="width:200px">
<option value="optionA" title="Description for A">option A</option>
<option value="optionB" title="Description for B">option B</option>
</select>