输入字段从选项获取数据列表的自定义属性

Question

如何从选项中获取datalist的属性。我正在获取期权价值

$( document ).ready(function() {
  var options = '<option value="Internet Explorer" key="18"></option>'+
      '<option value="Firefox" key="12"></option>'+
      '<option value="Chrome" key="123"></option>'+
      '<option value="Opera" key="14"></option>'+
      '<option value="Safari" key="15"></option>'
  ;
  
  $("#browsers").html(options);
  
});

$(document).on('click', '#submit', function() {
  var inputval= $("#key").val();
  alert(inputval)
  var key= $('datalist option[value='+inputval+']').attr('key');
  if (oldval)
  alert(key);

});

  <input list="browsers" id="key">
  <datalist id="browsers">
    
  </datalist>
  
  <button id="submit">submit
  </button>

 Screen Shots

实际结果

选择选择字段列表时，将在下一个空白页中打开，并且选择选项也无法正常工作

预期结果

这是示例静态选项丢失了，它工作正常，我们想要这样

Answer 1

阅读 API 文档中有关 selectmenus 的信息： http://api.jquerymobile.com/selectmenu/

改变：

$('#filter-menu').html(selCntryPrvdrSrch).change();

到

$('#filter-menu').html(selCntryPrvdrSrch).selectmenu( "refresh" );

参考：http://api.jquerymobile.com/selectmenu/#method-refresh

---

示例：

可以在此处找到有关 selectmenu 自定义过滤的工作示例：https://www.elitesystemer.no/demo/test/36549140/

这是基于 jQuery Mobile 演示页面中的示例代码：

1. http://demos.jquerymobile.com/1.4.2/selectmenu-custom-filter/
2. http://demos.jquerymobile.com/1.4.4/selectmenu-custom-filter/
3. http://demos.jquerymobile.com/1.4.5/selectmenu-custom-filter/