Question

我正在使用Datalist显示select选项的自动完成值。

a:3:{s:6:"_token";s:40:"AXqkhlwBwbJGcfG3l8ZVzN991HQnYwfioQUd38Mz";s:9:"_sf2_meta";a:3:{s:1:"u";i:1487576780;s:1:"c";i:1487576780;s:1:"l";s:1:"0";}s:5:"flash";a:2:{s:3:"old";a:0:{}s:3:"new";a:0:{}}}

现在使用<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>我能够获得所选选项的值，我关心的是如何获得相应的名称，就像我选择选项“one”时我应该将值作为“名称1”

javascript

如何获取所选名称。

Answer 1

您需要根据所选值获取option，然后才能设置文字

＆＃13;

$("#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);
  }
});

＆＃13;

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

＆＃13;

Answer 2

您可以使用所选选项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 )
   });
});

Answer 3

容易..

var lat = resp.data[0].latitude;

Answer 4

简单快捷的解决方案：

在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：selected”）。data（'name'）;

这将为您提供名称，最快的方式。

顺便说一句，你试过

<强> $("#referralNameList :selected").text();

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

4 个答案: