显示datalist选项中的不同文本

Question

显示datalist选项中的不同文本

5

我希望展示与 datalist option 的值不同的文本。我的 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，并将值插入输入框中。

我认为这是不可能的，但我想确认一下。

- Jonathan Martínez

1

当您选择选项时，您希望它在输入中是什么？ - dfsq

@dfsq 不，我想插入值1、2或3。 - Jonathan Martínez

看这个：如何在datalist html5中显示文本而不是值 - pan.goth

所以使用选择框。 - dfsq

@pan.goth 我想要做相反的事情，在这个例子中：我想在选项中显示“Internet Explorer...”，并在单击时插入值1。 - Jonathan Martínez

@dfsq，我不行，我正在搜索数据库并在下拉列表中显示结果，我需要输入和数据列表。选择标签是另一个输入。 - Jonathan Martínez

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- P. Frank · Answer 1

您可以在listbox中的<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>