javascript – 在datalist选项中显示不同的文本

2023年12月21日 184次阅读

我想显示与datalist选项中的值不同的文本.我的数据列表如下：

<input type="text" list="result">

<datalist id="result"> 
    <option data-text="text1" value="1"/>
    <option data-text="text2" value="2"/>
    <option data-text="text3" value="3"/>
</datalist>

我只想显示选项text1,text2,text3的下拉列表,并在输入中插入值.

我认为这是不可能的,但我想确定.

最佳答案 您只需将列表框中显示的文本添加到< option>之间即可.在点击列表中,这是替换的值.请试试

示例包含列表框中的文本和插入到输入中的数字(值)：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" list="result">

<datalist id="result"> 
    <option value="1">text1</option>
    <option value="2">text2</option>
    <option value="3">text3</option>
</datalist>

列表框中的数字(值)和插入到输入中的文本的示例：

$("#myInput").bind("select",function(){
    if($('#result').find('option').length) {
        if($('option[value='+this.value+']').length > 0){
          $("#myInput").val($('option[value='+this.value+']').data("text"));
        }
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" list="result">

<datalist id="result"> 
    <option data-text="text1" value="1"/>
    <option data-text="text2" value="2"/>
    <option data-text="text3" value="3"/>
</datalist>

更新

$("#myInput").bind("select",function(){
    if($('#result').find('option').length) {
        if($('option[value='+this.value+']').length > 0){
          $("#myInput").val($('option[value='+this.value+']').data("text"));
        }
    }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="myInput" type="text" list="result">

<datalist id="result"> 
    <option data-text="Playstation" value="1">Text1</option>
    <option data-text="Xbox" value="2">Text2</option>
    <option data-text="Nintendo" value="3">Text2</option>
</datalist>
点赞