Question

在表单输入中，我有一个datalist，我用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>

数据主义者的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();

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

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

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

    });
});

当我尝试从datalist中选择某个时，我得到的是：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个

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

Answer 3

您应该使用input事件而不是change。当用户从datalist中选择一些值时，它将为您提供触发的能力。

＆＃13;

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

＆＃13;

在Javascript中从datalist读取一个值

3 个答案: