Question

我有一个表格，用户可以选择自己的职业。职业列表位于单独的.js文件中，如下所示：

var occupationSelect = "<select id='occupationSelect' onchange='selectChange()' ><option value=''></option><option value='v10173' >AA Patrolman</option><option value='v10174' >Abattoir Inspector</option>

现在在我的表单中，我想要输入框（因为职业列表很长），以便用户键入A，B等，然后出现相关职业。类似于以下jsfiddle

Similar JS Fiddle

如果我将所有职业都放在一个数组中，这种小提琴就可以了。

但是，我的.js文件中的选项附加了值，以便稍后在Web应用程序中使用（例如，option value ='v10173'）

通过键入获得职业并确保附加值的最佳选择是什么。

Answer 1

编辑了js小提琴：

<input name="car" list="anrede" />
<input name="car-val" hidden />
<ul id="anrede"></ul>

var mycars2 = [
['Herr', 'herr'],
['thomas', 'v2345'],
];
var list = $('#anrede');

listHtml = '';
mycars2.forEach(function(item){
   var option = '<li data-val="' + item[1] + '">' +         item[0] + '</li>';
   listHtml += option;
});

list.html(listHtml);

$('#anrede li').on('click', function(){
    $('input[name="car"]').val($(this).html());
    $('input[name="car-val"]').val($(this).attr('data-val'));
});

这需要jquery，并且名称/值成对存储在列表内。

使用隐藏的输入作为值。

Answer 2

我建议对所选项目和对象数组的data-value使用"value"属性，如下所示：

var mycars = [
 {
  title: 'Herr',
  value: 'Herr Value'
 },
 {
  title: 'Frau',
  value: 'Frau Value'
 }
];
var list = document.getElementById('anrede');
var input = document.getElementById('carList');
mycars.forEach(function(item) {
  var option = document.createElement('option');
  option.value = item.title;
  option.dataset.value = item.value;
  list.appendChild(option);
});
input.onchange = function() {
  alert(document.querySelector('option[value="' + this.value + '"]').dataset.value)
}

这是jsfiddle-https://jsfiddle.net/0jvt05L0/302/

在输入框中输入搜索内容

2 个答案: