blocks|key|1671520|text|编辑，更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671521|关注Regent|1671522|尝试(v3)|1671523|html|1671524|<input+id="selected"+list="browsers"+name="browser">
<datalist+id="browsers">
++++<option+data-value="InternetExplorer"+value="1"></option>
++++<option+data-value="Firefox"+value="2"></option>
++++<option+data-value="Chrome"+value="3"></option>
++++<option+data-value="Opera"+value="4"></option>
++++<option+data-value="Safari"+value="5"></option>
</datalist>
<input+id="submit"+type="submit">|code-block|syntax|javascript|1671525|js|1671526|$(document).ready(function()+{

var+data+=+{};+
$("#browsers+option").each(function(i,el)+{++
+++data[$(el).data("value")]+=+$(el).val();
});
//+`data`+:+object+of+`data-value`+:+`value`
console.log(data,+$("#browsers+option").val());


++++$('#submit').click(function()
++++{
++++++++var+value+=+$('#selected').val();
++++++++alert($('#browsers+[value="'+%2B+value+%2B+'"]').data('value'));
++++});
});|1671527|jsfiddle+http://jsfiddle.net/guest271314/j7ehtqjd/13/|offset|length|1671528|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/guest271314/j7ehtqjd/13/^0|0|0|0|0|0|0|0|9|18|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>Edit, updated</p>

<p>Following Regent</p>

<p>Try (v3)</p>

<p>html</p>

<pre><code>&lt;input id="selected" list="browsers" name="browser"&gt;
&lt;datalist id="browsers"&gt;
    &lt;option data-value="InternetExplorer" value="1"&gt;&lt;/option&gt;
    &lt;option data-value="Firefox" value="2"&gt;&lt;/option&gt;
    &lt;option data-value="Chrome" value="3"&gt;&lt;/option&gt;
    &lt;option data-value="Opera" value="4"&gt;&lt;/option&gt;
    &lt;option data-value="Safari" value="5"&gt;&lt;/option&gt;
&lt;/datalist&gt;
&lt;input id="submit" type="submit"&gt;
</code></pre>

<p>js</p>

<pre><code>$(document).ready(function() {

var data = {}; 
$("#browsers option").each(function(i,el) {  
   data[$(el).data("value")] = $(el).val();
});
// `data` : object of `data-value` : `value`
console.log(data, $("#browsers option").val());


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

<p>jsfiddle <a href="http://jsfiddle.net/guest271314/j7ehtqjd/13/" rel="noreferrer">http://jsfiddle.net/guest271314/j7ehtqjd/13/</a></p>


blocks|key|1671566|text|这是一个相当混乱的方法，不用依赖jQuery+(编辑:我意识到OP正在使用jQuery，但是这个方法可以很好地集成jQuery或不集成with，所以可能会帮助其他不使用with的人)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1671567|首先，交换value和text节点，如下所示：|1671568|<input+list="browsers"+name="browser"+id="my_input">
++<datalist+id="browsers">
++++<option+value="Internet+Explorer">1</option>
++++<option+value="Firefox">2</option>
++++<option+value="Chrome">3</option>
++++<option+value="Opera">4</option>
++++<option+value="Safari">5</option>
++</datalist>
++<input+type="submit">|code-block|syntax|javascript|1671569|这可确保输入始终为用户显示正确的值。然后添加一些JavaScript来检查相应值的文本节点，如下所示：|1671570|let+$input+=+document.getElementById('my_input');
let+$datalist+=+document.getElementById('browsers');

$input.addEventListener('change',+()+=>+{
++let+_value+=+null;

++let+input_value+=+$input.value;
++let+options+=+$datalist.children;
++let+i+=+options.length;

++while(i--)+{
++++let+option+=+options[i];

++++if(option.value+==+input_value)+{
++++++_value+=+option.textContent;
++++++break;
++++}
++}

++if(_value+==+null)+{
++++console.warn('Value+does+not+exist');
++++return+false;
++}

++console.log('The+value+is:',+_value+);
});|1671571|您还可以将'change'事件侦听器更改为'keyup'，以获得实时反馈。您可以简单地添加一个额外的hidden输入来存储值，从而允许您同时发送值和id，而不是console.log('The+value+is:',+_value+)。|offset|length|style|CODE|1671572|这使用了现代的JavaScript表示法，但要使其向后兼容，只需将'change',+()+=>+{调用更改为'change',+function()+{，并将let更改为var。|1671573|更新:使用ES6|1671574|比上面略有更新的答案|1671575|​|1671576|const+input+=+document.getElementById('my_input');
const+list+=+document.getElementById('browsers');

input.addEventListener('change',+()+=>+{
++const+{value:+inputVal}+=+input
++const+children+=+Array.from(list.children)

++//+Fetch+matched+elem
++const+[matchedElem]+=+children.filter(({value})+=>+value+===+inputVal)
++
++//+If+element+doesn't+exist,+no+matches
++if(!matchedElem)+{
++++console.log('No+matches+found')
++++
++++return
++}
++
++//+Do+whatever
++console.log('Matched+value+for',+matchedElem.value,+'is',+matchedElem.textContent)
});|1671577|<input+type="search"+list="browsers"+name="browser"+id="my_input">

<datalist+id="browsers">
++<option+value="Internet+Explorer">1</option>
++<option+value="Firefox">2</option>
++<option+value="Chrome">3</option>
++<option+value="Opera">4</option>
++<option+value="Safari">5</option>
</datalist>

<input+type="submit">|1671578|1671579|entityMap^0|0|0|0|0|0|5|8|L|7|1E|6|28|11|0|X|H|1J|M|28|3|2E|3|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1A|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1C|8|@$O|1D|P|1E|Q|R]|$O|1F|P|1G|Q|R]|$O|1H|P|1I|Q|R]|$O|1J|P|1K|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1L|8|@$O|1M|P|1N|Q|R]|$O|1O|P|1P|Q|R]|$O|1Q|P|1R|Q|R]|$O|1S|P|1T|Q|R]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1U|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1V|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1W|8|@]|9|@]|A|$]]|$1|10|3|11|5|F|7|1X|8|@]|9|@]|A|$G|H]]|$1|12|3|13|5|F|7|1Y|8|@]|9|@]|A|$G|H]]|$1|14|3|Z|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|16|$]]

<p>A quite messy method for doing this without dependencies like jQuery (<em>edit: I realise that jQuery is being used by the OP, but this method will integrate fine with or without jQuery, so might helps others who are not</em>).</p>
<p>First, swap your value and text nodes around, like so:</p>
<pre><code>&lt;input list=&quot;browsers&quot; name=&quot;browser&quot; id=&quot;my_input&quot;&gt;
  &lt;datalist id=&quot;browsers&quot;&gt;
    &lt;option value=&quot;Internet Explorer&quot;&gt;1&lt;/option&gt;
    &lt;option value=&quot;Firefox&quot;&gt;2&lt;/option&gt;
    &lt;option value=&quot;Chrome&quot;&gt;3&lt;/option&gt;
    &lt;option value=&quot;Opera&quot;&gt;4&lt;/option&gt;
    &lt;option value=&quot;Safari&quot;&gt;5&lt;/option&gt;
  &lt;/datalist&gt;
  &lt;input type=&quot;submit&quot;&gt;
</code></pre>
<p>This ensures that the input always shows the correct value for the user. Then add in some JavaScript to check the text node of the corresponding value, like so:</p>
<pre><code>let $input = document.getElementById('my_input');
let $datalist = document.getElementById('browsers');

$input.addEventListener('change', () =&gt; {
  let _value = null;

  let input_value = $input.value;
  let options = $datalist.children;
  let i = options.length;

  while(i--) {
    let option = options[i];

    if(option.value == input_value) {
      _value = option.textContent;
      break;
    }
  }

  if(_value == null) {
    console.warn('Value does not exist');
    return false;
  }

  console.log('The value is:', _value );
});
</code></pre>
<p>You can also change the <code>'change'</code> event listener to <code>'keyup'</code> too, to get real-time feedback. And instead of <code>console.log('The value is:', _value )</code> you can simply add in an additional <code>hidden</code> input to store the value, thus allowing you to send both the value and id.</p>
<p>This uses modern JavaScript notation, but to make it backward compatible just need to change the <code>'change', () =&gt; {</code> call to <code>'change', function() {</code> and change <code>let</code> to <code>var</code>.</p>
<h1 id="updated-using-es6-yl5i">Updated: using ES6</h1>
<p>A slightly more up-to-date answer than above</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const input = document.getElementById('my_input');
const list = document.getElementById('browsers');

input.addEventListener('change', () =&gt; {
  const {value: inputVal} = input
  const children = Array.from(list.children)

  // Fetch matched elem
  const [matchedElem] = children.filter(({value}) =&gt; value === inputVal)
  
  // If element doesn't exist, no matches
  if(!matchedElem) {
    console.log('No matches found')
    
    return
  }
  
  // Do whatever
  console.log('Matched value for', matchedElem.value, 'is', matchedElem.textContent)
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="search" list="browsers" name="browser" id="my_input"&gt;

&lt;datalist id="browsers"&gt;
  &lt;option value="Internet Explorer"&gt;1&lt;/option&gt;
  &lt;option value="Firefox"&gt;2&lt;/option&gt;
  &lt;option value="Chrome"&gt;3&lt;/option&gt;
  &lt;option value="Opera"&gt;4&lt;/option&gt;
  &lt;option value="Safari"&gt;5&lt;/option&gt;
&lt;/datalist&gt;

&lt;input type="submit"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1885774|text|我想我会为这些答案添加一个更短的香草JS版本。这将隐藏真实值，但当提交项目时，它将用表单上的所需值替换它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1885775|<input+id="selected"+list="browsers"+name="browser"+>
<datalist+id="browsers">
++++<option+data-value="InternetExplorer"+value="1"></option>
++++<option+data-value="Firefox"+value="2"></option>
++++<option+data-value="Chrome"+value="3"></option>
++++<option+data-value="Opera"+value="4"></option>
++++<option+data-value="Safari"+value="5"></option>
</datalist>
<input+id="submit"+type="submit">```

<script>
function+getRealValue(ele){
++var+dl=ele.list.options;
++for+(var+x=0;x<dl.length;x%2B%2B){
++++if+(dl[x].value==ele.value){
++++++ele.value=dl[x].dataset.value;
++++++return+dl[x].dataset.value;
++++}
++}
}
</script>|code-block|syntax|javascript|1885776|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I though I would add a shorter Vanilla JS version of these answers.  This will hide the true value, but when the item is submitted, it will replace it with your desired value on the form.</p>

<pre><code>&lt;input id="selected" list="browsers" name="browser" &gt;
&lt;datalist id="browsers"&gt;
    &lt;option data-value="InternetExplorer" value="1"&gt;&lt;/option&gt;
    &lt;option data-value="Firefox" value="2"&gt;&lt;/option&gt;
    &lt;option data-value="Chrome" value="3"&gt;&lt;/option&gt;
    &lt;option data-value="Opera" value="4"&gt;&lt;/option&gt;
    &lt;option data-value="Safari" value="5"&gt;&lt;/option&gt;
&lt;/datalist&gt;
&lt;input id="submit" type="submit"&gt;```

&lt;script&gt;
function getRealValue(ele){
  var dl=ele.list.options;
  for (var x=0;x&lt;dl.length;x++){
    if (dl[x].value==ele.value){
      ele.value=dl[x].dataset.value;
      return dl[x].dataset.value;
    }
  }
}
&lt;/script&gt;

</code></pre>


<p>Here is an example:</p>

<pre><code>&lt;input list="browsers" name="browser"&gt;
&lt;datalist id="browsers"&gt;
    &lt;option value="Internet Explorer"&gt;1&lt;/option&gt;
    &lt;option value="Firefox"&gt;2&lt;/option&gt;
    &lt;option value="Chrome"&gt;3&lt;/option&gt;
    &lt;option value="Opera"&gt;4&lt;/option&gt;
    &lt;option value="Safari"&gt;5&lt;/option&gt;
&lt;/datalist&gt;
</code></pre>

<p><a href="http://jsfiddle.net/j7ehtqjd/1/" rel="noreferrer">http://jsfiddle.net/j7ehtqjd/1/</a> </p>

<p>What I want to achieve is when I click on the input element the <em>value</em> would not be displayed, but ONLY the <em>text</em> (i.e. 1, 2, 3, 4, 5). I.e. the value should be <em>hidden</em> like it is with a general dropdown (<code>&lt;select&gt;</code> element).</p>

<p>This autocomplete feature is necessary, else I would have gone with the normal dropdown.</p>


How to display only the text in datalist HTML5 and not the value?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

下面是一个示例：<input list="browsers" name="browser"><datalist id="browsers">    <option value="Internet Explorer">1</option>    <option value="Firefox">2</option>    ...

问如何只显示datalist HTML5中的文本而不显示值？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何只显示datalist HTML5中的文本而不显示值？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何只显示datalist HTML5中的文本而不显示值？
EN