Datalist中的jQuery更改事件[html5]答案

【问题标题】：Jquery change event in Datalist[html5]Datalist中的jQuery更改事件[html5]
【发布时间】：2015-03-03 18:54:53
【问题描述】：

这是我的代码：

<input name="cmbname" type="text" id="cmbname" list="listcmbname" autocomplete="off" runat="server">
<datalist id="listcmbname">
         <option data-id="1" value="a"></option>
         <option data-id="8" value="aa"></option>
         <option data-id="10" value="aaa"></option>
         <option data-id="11" value="b"></option>
         <option data-id="15" value="bb"></option>
         <option data-id="18" value="bbb"></option>
</datalist>

我使用cmbname.value 在后面的代码中获取输入值。
但我也需要数据 ID。我用过cmbname.Attributes["data-id"]，但没用。
我认为它将通过 jquery 更改事件来修复。

请帮忙

【问题讨论】：

标签： javascript jquery asp.net html

【解决方案1】：

看到这个：http://jsfiddle.net/xttwt/48/，

你可以像这样找到当前选择的选项的数据ID：

var val=$('#cmbname').val();
var data_id= $('#listcmbProcess').find('option[value="'+val+'"]').data('id');

【讨论】：

我被关注了。非常感谢。在后面的代码中我使用了cmbname.Attributes["data-id"]，但它返回null。
@nimashayanfar.. 它只会在输入中的文本与 datalist 中的任何选项匹配时返回值
看到这个：link，我在你的代码中使用了它，并在后面的 asp.net 代码中使用了cmbname.Attributes["data-id"]，但返回了 null。

【解决方案2】：

嗯，Jquery 有.data() method。因此，要获取“data-id”属性，您可以使用$('input').data("id");

【讨论】：

【解决方案3】：

$('#cmbname').attr('data-id');你也可以用这个来获取数据id

【讨论】：

【解决方案4】：

使用这个attr()

$('#cmbname').attr('data-id');

【讨论】：

【解决方案5】：

我用过这个：

<input id="cmbLoc" name="cmbLoc" runat="server" list="listcmbLoc" autocomplete="off" />
<datalist id="listcmbLoc">
       <option data-id="15" value="CPF"></option>
       <option data-id="18" value="HOLD"></option>
       <option data-id="19" value="CCR"></option>
 </datalist>
<div style="display: none"><input id="cmbLoc_ID" type="text" name="cmbLoc_ID" runat="server"/></div>
<script type="text/javascript">
    $(document).ready(function () {
          $("#cmbLoc").change(function () {
$("#MainContent_cmbLoc_ID").val($('#listcmbLoc').find('option[value="' + $(this).val() + '"]').data('id'));
          });
    });
</script>

并在后面的代码中输入cmbLoc_ID.value得到data-id。

【讨论】：