从 Javascript 中的数据列表中读取一个值

Question

在表单输入中我有一个数据列表，我用 JSON.

加载它

<div class="form-group">
  <div class="col-md-5">
       <input type="text" id="product" list="products" class="form-control" name="product" />
       <datalist id="products"></datalist>
    </div>                      
</div>

datalist的JS是这样的：

var dataList = document.getElementById('products');
var input = document.getElementById('product');
var request = new XMLHttpRequest();

request.onreadystatechange = function(response) {
  if (request.readyState === 4) {
    if (request.status === 200) {
      // Parse the JSON
      var jsonOptions = JSON.parse(request.responseText);

      // Loop over the JSON array.
      jsonOptions.forEach(function(item) {
        var option = document.createElement('option');

        option.value =item.product;
        option.text = item.description;
        dataList.appendChild(option);
      });

      // Update the placeholder text.
      input.placeholder = "product";
    } else {
      // An error occured :(
      input.placeholder = "errorr :(";
    }
  }
}; 

// Update the placeholder text.
input.placeholder = "Loading options...";

// Set up and make the request.
request.open('GET', 'products.json', true);
request.send();

现在我尝试执行以下操作。当用户从列表中 selects sth 时，我想获取该值。我尝试了 2 种方法来获取值但没有成功..（我在上面的代码之后插入了以下内容）：

$(function() {
    $('#product').on('change keyup', function() {

        var i = this.selectedIndex;
        var opt = $('option[value="'+$(this).val()+'"]');
        console.log("1 --> " + opt + " 2 -->" + i);

    });
});

当我尝试从数据列表中 select 某事时得到的是：

1 --> [object Object] 2 -->undefined

$(function() {
  $('#product').on('change keyup', function() {
console.log($(this));
    var i = $(this).selectedIndex;
    var opt = $('option[value="' + $(this).val() + '"]');
    console.log("1 --> " + opt + " 2 -->" + i);
   

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-md-5">
    <input type="text" id="product" list="products" class="form-control" name="product" />
    <datalist id="products">
      <option value="Internet Explorer">1</option>
      <option value="Firefox">2</option>
    </datalist>
  </div>
</div>

Answer 1

试试这个

$("#products option[value='"+$("#product").val()+"']").text()

Answer 2

您应该使用 input 事件而不是 change。当用户 select 来自数据列表的一些值时，它会给你触发的能力。

$('#product').on('input keyup', function() {
  var options = $('#products option');
  var inputValue = $('#product')[0].value;

  for (var i = 0; i < options.length; ++i)
    if (options[i].value === inputValue)
      console.log(
          'Selected value from option is ==>',
          options[i].value
      );

});

Answer 3

datalist 没有 selectedIndex，因为它对浏览器是隐藏的。如果你想获取文本字段的值，那么你可以使用这个：

   $(function() {
     $('#product').on('blur', function() {
       var i = this.value;
       var opt = $('option[value="' + $(this).val() + '"]');
       console.log("1 --> " + opt + " 2 -->" + i);

     });
   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-md-5">
    <input type="text" id="product" list="products" class="form-control" name="product" />
    <datalist id="products">
      <option value="Product1">
        <option value="Product2">
          <option value="Product3">
            <option value="Product4">
              <option value="Product5">
    </datalist>
  </div>
</div>

从 Javascript 中的数据列表中读取一个值

Read a value from datalist in Javascript

javascript

jquery

html-datalist