1

このトピックについて少しグーグルで調べましたが、データリスト要素に対するブラウザーのサポートはまだかなり貧弱であるため、誰もそれを使用していないか、実際にこの質問をしたことがないようです。私はデータリストを持っています:

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

サイコロはありません。

オプションリストが変更されたときに、この要素をそれらのページにリンクさせるためのアドバイスはありますか?

4

1 に答える 1

6

changeイベント (新しいオプションが選択され、フォーカスが別の要素に与えられたときに発生する)まで待つのではなく、データリスト オプションが選択されたときにイベントを発生させたい場合は、次inputのようにイベントにバインドする必要があります。それで：

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

jsFiddle デモ| 「oninput」のMDN ドキュメントも参照してください。

于 2014-05-16T20:46:07.740 に答える