Question

在下面的代码段中，我有两种选择项目的方法：使用datalist输入和使用选项进行传统选择。

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

我喜欢的是输入+数据主义方法的行为类似于传统的选择，其中＆＃34; Foo＆＃34;和＆＃34; Bar＆＃34;显示为选项时选项的值为＆＃34; 1＆＃34;和＆＃34; 2＆＃34;分别

我还添加了一个重复的名字＆＃34; Foo＆＃34;有价值＆＃34; 3＆＃34;。这表明任何解决方案都不能依赖于独特的选项。

＆＃13;

<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>

＆＃13;

Answer 1

没有本土方式。对于text inputs

input元素represents一行纯文本编辑控制元素的value。

因此，不可能使文本输入显示与其值不同的文本。

你可以在value中劫持HTMLInputElement.prototype getter，但我不推荐它，如果值不是唯一的话，我看不出任何方法可以知道选择了哪个选项。< / p>

var des = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(HTMLInputElement.prototype, 'value', { get: function() {
  if(this.type === 'text' && this.list) {
    var value = des.get.call(this);
    var opt = [].find.call(this.list.options, function(option) {
      return option.value === value;
    });
    return opt ? opt.dataset.value : 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>

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

var inp = document.querySelector('input');
inp.addEventListener('input', function() {
  var value = this.value;
  var opt = [].find.call(this.list.options, function(option) {
    return option.value === value;
  });
  if(opt) {
    this.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。

Answer 2

因此对于我正在研究的代码库，我有一个编程的fieldWriter用于编写动态表单。我被要求把一堆选择变成自动完成的数据列表。我为此设置了3个元素。

一个名为“ somefield_dl”的数据列表
一个名为“ somefield_proxy”的可见输入
一个名为“ somefield”的隐藏输入

在数据列表中，我将每个选项设置为<option data-value="439" value="Readable Text"></option>

使用事件处理程序，只要“ somefield_proxy”更改，“ somefield”就会从具有匹配值的“ somefield_dl”更改为选项的数据值。

就代码而言，使用这些代码的主要区别在于，每次更新字段的值时，都必须在隐藏输入上触发click事件以更新代理输入。另外，在收集数据时，必须排除名称以_proxy结尾的元素。

Answer 3

不知道这会对你有所帮助，只是试一试

  <input list="options" id="opt" oninput="onInput()">
  <datalist id="options">
        <option value="1">Foo</option>
       <option value="2">Bar</option>
       <option value="3">Foo</option> 
        <option value="4">Foo</option>
       <option value="5">Bar</option>
       <option value="6">Foo</option> 
  </datalist>




 $( document ).ready(function() {              
         var x =  document.getElementById("options");
           for (i = 0; i < x.length; i++)
            alert(x.options[i].value);     


            $("#opt").click(function(){
                 $("#opt").val("");});                   
             });

     function onInput() {
            var val = document.getElementById("opt").value;
            var opts = document.getElementById('options').childNodes;
             for (var i = 0; i < opts.length; i++) {
                    if (opts[i].value === val) {                
                    document.getElementById("opt").value = opts[i].value + "   "+ opts[i].innerHTML;
                    break;
                  }
                }
              }

Answer 4

datalist的正确语法如下所示。也没有必要有两个同名的选项。我把JavaScript从HTML中取出来了。各个选项的ID属性可以替换为其他属性。

$(function() {
  $('input[name=chooseOption]').on('input',function() {
    var selectedOption = $('option[value="'+$(this).val()+'"]');
    console.log(selectedOption.length ? selectedOption.attr('id') : 'This opiton is not in the list!');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="options" name="chooseOption">
<datalist id="options">
  <option id="1" value="Foo">
  <option id="2" value="Bar">
  <option id="3" value="Foo">
</datalist>

Answer 5

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

e.g：

＆＃13;

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

＆＃13;

<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">

＆＃13;

jsfiddle

感谢@ guest271314

设置隐藏的datalist选项值

5 个答案: