Question

这是我的js代码

$('#AddressStreet').on('keyup', function() {
    let value = $(this).val();
    let optionVal = $('#AddressStreetList option[value*="' + value + '"]').attr('rel');
    console.log(optionVal); //output 'undefined'
    if (!optionVal) {
        // do something
    }
});

这是我的html代码：

<input type="text" class="form-control" name="street" placeholder="street" id="AddressStreet">

我正在使用ajax创建一个简单的数据列表，当我输入输入Сам时，数据列表看起来像这样

<datalist id="AddressStreetList">
  <option rel="2346" value="ул. Самара"></option>
  <option rel="2444" value="ул. Цар Самуил"></option>
</datalist>

当我尝试将其输出到控制台时，我从console.log中获得了undefined。另外，当我使用Chrome的DevTools并编写

时

$（'＃AddressStreetList option [value * =“Сам”]'）。attr（'rel'）;

我成功获得了欲望输出：

“ 2346”

但是我不明白为什么我的代码不想工作？

Answer 1

您的期权价值存在问题。如果您在值中键入另一个术语，例如value1，value2，示例，用户等，则一切正常。我认为您的选项具有特殊性，这就是为什么它不起作用的原因。

请在此处检查示例代码

[https://codepen.io/aalokmali/pen/yWWWdm]

Answer 2

一个非常愚蠢的错误，我忘记将list属性放在我的input字段中，这就是为什么它不起作用的原因。应该是这样

<input type="text" class="form-control" list="AddressStreetList" name="street" placeholder="street" id="AddressStreet">

从包含特定字符串的数据列表中按值选择选项

2 个答案: