在选项标签中隐藏特定值

Question

我有以下 AJAX 调用，现在我在下拉菜单中有公司的 description、name 和 id。

我想知道是否可以隐藏data.company[i].id 之类的内容。这将从 UI 中隐藏，但我仍然想要它，因为当用户选择一个项目时，我会在我的其他逻辑中获取 id。

$.ajax({
  url: 'myurl',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $.each(data.company, function(i) {
      $("#mylist").append('<option>' + data.company[i].description + ' | ' + data.company[i].name + ' | ' + data.company[i].id + '</option>');
    });
  },
  error: function(request, error) {
    $.growl.error({
      title: "Error",
      message: "Webservice request failed!"
    });
  }
});

Answer 1

你可以设置值。

$.ajax({
  url: 'myurl',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    $.each(data.company, function(i) {
        var optData = data.company[i].description;
        var optText = data.company[i].name;
        var optValue = data.company[i].id;
        $("#mylist").append(`<option data-description="${optData}" value="${optValue}">${optText}</option>`);
    });
  },
  error: function(request, error) {
    $.growl.error({
      title: "Error",
      message: "Webservice request failed!"
    });
  }
});

获取当前选择的值：

$('#mylist').val();

获取当前选中的文本：

$('#mylist :selected').text();

获取当前选中的数据：

$('#mylist :selected').data('description');

Answer 2

如果您想从 UI 中隐藏一个值但保留它以便在您的逻辑中使用它，请尝试在元素上使用 data 属性。这对用户是不可见的，但可以在选择该选项时读出。

这是一个基本的例子：

let data = {
  company: [{
    description: 'Desc #1',
    name: 'Name #1',
    id: 'Id #1'
  },{
    description: 'Desc #2',
    name: 'Name #2',
    id: 'Id #2'
  },{
    description: 'Desc #3',
    name: 'Name #3',
    id: 'Id #3'
  }]  
}

let options = data.company.map(company => `<option data-id="${company.id}">${company.description} | ${company.name}</option>`);
$('#mylist').append(options).on('change', e => {
  let id = $(e.target).find('option:selected').data('id');
  console.log(e.target.value, id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mylist"></select>