Question

我已经对该主题进行了一些谷歌搜索，但由于浏览器对datalist元素的支持仍然很差，似乎没有人使用它或者之前没有真正问过这个问题。我有一个数据主义者：

<form>

     <input placeholder="Enter a location or choose from the list" list="restaurants" id="hp-restaurants">

     <datalist id="restaurants">
         <option value="Sanford, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/sanford/" />
         <option value="Kitery, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/kittery/" />
         <option value="Belfast, ME" data-attr="<?php echo site_url(); ?>/locations/lobster-in-the-rough/belfast/" />
         <option value="Waterville, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/waterville/" />
         <option value="Brewer, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/brewer/" />
         <option value="South Portland, ME" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/south-portland/" />
         <option value="Bedford, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/bedford-nh/" />
         <option value="Dover, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/dover-nh/" />
         <option value="Chichester, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/chichester-nh/" />
         <option value="Salem, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/salem-nh/" />
         <option value="West Lebanon, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/west-lebanon-nh/" />
         <option value="Nashua, NH" data-attr="<?php echo site_url(); ?>/locations/weathervane-restaurants/nashua-nh/" />
     </datalist>

</form>

每个选项都应链接到我在其中添加的data-attr属性中的页面。如果有更简单的方法可以将这些选项链接到网页，我就不知道它了。这是我第一次尝试使用datalist元素做任何事情。如果我从根本上做错了，那么随意带我去学校。

目前，即使下拉列表发生变化，我也试图触发。我认为jQuery的.change（）事件可以解决这个问题，但事实并非如此。无论如何，我正在测试这个事件，看它是否触发了这个：

$('#hp-restaurants').click(function() {
    console.log('HELLO WORLD');
});

没有骰子。

有关在选项列表更改时将此元素链接到这些页面的任何建议吗？

Answer 1

如果您在选择了某个数据列表选项时想要触发事件，而不是等到change事件（在选择了新选项时触发了和焦点放在另一个元素上）你应该绑定到input事件，如下所示：

 $('#hp-restaurants').on('input', function () {
    console.log('Input has been changed.');
 });

jsFiddle demo |另请参阅'oninput'

的MDN文档

为什么.change（）不适用于datalist元素？还有其他选择吗？

1 个答案: