设置隐藏的datalist选项值

Question

在下面的代码段中,我有两种方法可以选择项目:使用datalist输入和使用选项进行传统选择.

select元素保持选项值隐藏,我们仍然可以使用它this.value.但是,对于datalist,实际显示该值,并且该选项的文本内容显示为辅助标签.

我想要的是让输入+数据主义方法的行为类似于传统的选择,其中"Foo"和"Bar"显示为选项,当选择时分别具有值"1"和"2".

我还添加了一个重复的名称"Foo",其值为"3".这表明任何解决方案都不能依赖于唯一选项.

<input list="options" onchange="console.log(this.value)"/>
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<select onchange="console.log(this.value)">
  <option value=""></option>
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</select>

Answer 1

您可以使用data-value和jquery来隐藏您的价值。

例如：

$(document).ready(function() {

    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="1" value="InternetExplorer"></option>
    <option data-value="2" value="Firefox"></option>
    <option data-value="3" value="Chrome"></option>

</datalist>
<input id="submit" type="submit">

提琴手

感谢@guest271314

Answer 2

没有本地方式。对于文本输入

该input元素代表了该元素的一个行纯文本编辑控件的值。

所以不可能让文本输入显示一些与其值不同的文本。

您可以劫持 中的valuegetter HTMLInputElement.prototype，但我不推荐这样做，而且如果值不唯一，我看不出有任何方法可以知道选择了哪个选项。

const des = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(HTMLInputElement.prototype, 'value', {
  get: function() {
    const value = des.get.call(this);
  
    if (this.type === 'text' && this.list) {
      const opt = [].find.call(this.list.options, o => o.value === value);
      return opt ? opt.dataset.value : value;
    }

    return value;  
  } 
});

<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option data-value="1">Foo</option>
  <option data-value="2">Bar</option>
  <option data-value="3">Foo</option>
</datalist>

或者你可以让输入显示选项的值而不是文本，但立即替换它：

document.querySelector('input').addEventListener('input', event => {
  const value = event.target.value;
  const opt = [].find.call(event.target.list.options, o => o.value === value);

  if (opt) {
    event.target.value = opt.textContent;
  }
});

<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

在第二个示例中，oninput="console.log(this.value)"显示选项的值，因为该代码在将值替换为文本内容之前运行。如果您希望以后的.value访问返回选项值，则需要value像第一个示例中那样劫持getter。