Question

其实我有一位数据专家：

<datalist id='modelsList'>
   <option value='1'>Dummy1</option>
   <option value='2'>Dummy2</option>
</datalist>

这用于输入：

<input type='text' name='dummy' autocomplete='off' list='modelsList' value=''/>

如果我开始输入Dummy2然后我点击下拉列表结果，文本框显示2.我需要找到一种方法，将2作为值，但Dummy2作为文本。

我无法使用下拉列表（选择标记）

Answer 1

HTML5中文本input的格式如下：

<input type="text" name="name" value="Value" placeholder="Placeholder Text">

当用户输入内容时，value会更改。

您可能会对textarea感到困惑：

<textarea name="name">Value</textarea>

Answer 2

在这里，根据您的要求我的解决方案检查出来...... 您可以使用输入事件来实现此类功能，

HTML

<input type='text' id='dummy' list='modelsList'/>
<datalist id='modelsList'>
     <option value='1'>Dummy1</option>
     <option value='2'>Dummy2</option>
</datalist>

Jquery的

$("#dummy").on('input', function () {
    var val = this.value;
    if($('#modelsList option').filter(function(){
        return this.value === val; 
    }).length) {
       var option = $('#modelsList').find('option[value="' + val + '"]');
       $(this).val(option.text());
    }
});

还要检查上述代码的DEMO。

Answer 3

如果您想要添加textarea标记，则必须知道value属性无效，但是如果您想使用它而不是input，则可能需要与你说的相似：

<textarea name="name">contentHere</textarea>

HTML / Javascript输入类型=“文本” - 如何显示与值不同的文本？

3 个答案: