数据列表如何获取所选名称而不是值

-1

我正在使用Datalist显示选择选项的自动完成值。数据列表如何获取所选名称而不是值

<input type="text" class="form-control input-sm" name="referralName" id="referralName" list="referralNameList"> 
<datalist id="referralNameList"> 
<option value="one">Name 1</option> 
<option value="two">Name 2</option> 
<option value="three">Name 3</option> 
</datalist>

现在使用javascript我能够获得所选选项的值，我担心的是我怎样才能得到相应的名称一样，当我选择的选择“一”我应该得到的值作为“名称1”

$("#referralName").on('blur',function(){ 
       var value=$("#referralName").val();      
       console.log("value od selected referral "+value) 
       });

如何获取选定的名称。

来源

2017-02-20 Vipul Singh

你动态创建它？ – Rahul

是的，我正在动态创建 –

非常好，然后快速简单的解决方案是添加一个属性，如data-name =“名称1”，你可以这样做吗？ – Rahul

您需要根据选择的值来获得option那么你可以设置文字

$("#referralName").on('input', function() { 
 
    var value = $(this).val(); 
 

 
    //Persist selected value in a hidden input 
 
    $('#referralNameValue').val(value); 
 

 
    //For debugging 
 
    console.clear(); 
 
    console.log("value of selected referral " + value) 
 

 
    //update value 
 
    if (!!value.length) { 
 
    var text = $("#referralNameList option[value=" + value + "]").text(); 
 
    $(this).val(text); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="form-control input-sm" name="referralName" id="referralName" list="referralNameList"> 
 
<input type="hidden" id="referralNameValue" list="referralNameList"> 
 
<datalist id="referralNameList"> 
 
<option value="one">Name 1</option> 
 
<option value="two">Name 2</option> 
 
<option value="three">Name 3</option> 
 
</datalist>

来源

2017-02-20 07:57:50 Satpal

你可以使用text()所选选项的这样

$(document).ready(function() { 
    $("#referralName").on('change', function() { 
    var value = $("#referralName").val(); 
    var text = $("#referralNameList").find('option[value=' + value + ']').text(); 
    console.log("Text of selected referral " + text) 
    }); 
});

来源

2017-02-20 07:59:54 Mairaj

文本

简单..

$('#referralName').change(function(e){ 
     var val = e.target.value 
     console.log($("#referralNameList option[value='" + val + "']").text()); 
    });

来源

2017-02-20 08:00:54 Christian

方便，快捷的解决方案：

追加data-name在<option>属性像下面

<datalist id="referralNameList"> 
<option data-name="Name 1" value="one">Name 1</option> 
<option data-name="Name 2" value="two">Name 2</option> 
<option data-name="Name 3" value="three">Name 3</option> 
</datalist>

，然后用下面的代码

$获得所选文本（“＃referralNameList ：选择了“）的数据（ '姓名'）;。

这会给你的名字，最快的方式。

的方式做你试过

$("#referralNameList :selected").text();

来源

2017-02-20 08:06:46 Rahul

是的我试过这个'$（“＃referralNameList：selected”）。它不工作' –

数据列表如何获取所选名称而不是值

回答

相关问题