在datalist选项

Question

我想显示与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选项的下拉列表，并在输入中插入值。

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

Answer 1

您只需将listbox中显示的文字添加到<option>之间即可。在点击列表中，这是替换的值。请尝试

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

$("#myInput").bind("select",function(){
    if($('#result').find('option').length) {
        if($('option[value='+this.value+']').length > 0){
          $("#myInput").val($('option[value='+this.value+']').data("text"));
        }
    }
})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>更新

＆＃13;

＆＃13;

$("#myInput").bind("select",function(){
    if($('#result').find('option').length) {
        if($('option[value='+this.value+']').length > 0){
          $("#myInput").val($('option[value='+this.value+']').data("text"));
        }
    }
})

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;