既存のセレクトタグ内で部分一致の検索が行えます。
また、プルダウンリストにないものを即時に追加することも可能です。
index.html
<head> <link rel="stylesheet" href="jquery.vselect.css"> <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script> <script charset="UTF-8" src="jquery.vselect.js"></script> <script charset="UTF-8" src="index.js" defer></script> </head><body> <select class="vselect" style="width: 200px;"> <option></option> <option>あいうえお</option> <option>かきくけこ</option> <option>さしすせそ</option> <option>たちつてと</option> <option>なにぬねの</option> <option>はひふへほ</option> <option>まみむめも</option> <option>やゆよ</option> <option>らりるれろ</option> <option>わをん</option> </select> </body>
index.js
'use strict'; (function($){ $(document).ready(function(){ $('select.vselect').vSelect(OPTION); }); })(jQuery);]]>
サンプル・ダウンロード・使い方はこちらから
]]>
e.stopPropagation();
があるが、子や孫要素がたくさんあるとめんどくさい。
今回は親要素のクリックイベンド発火時に、
自身をクリックしたものか伝播してきたものかを判別し、
伝播してきたものは処理しないようにした
$('#parent').click(function(e){ /* 伝播は処理しない */ if( $(this).get(0) != $(e.target).get(0)) return; /* これ以降に処理を記述する */ console.log('親要素がクリックされました'); });]]>
アンダーバーから始まる部分を書き換えられるので動作しない模様。
その部分を文字列化して書き換えられないようにした。
// $.datepicker._updateDatepicker( hoge ); $.datepicker["_"+"updateDatepicker"]( hoge );]]>
[-]$('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body); [+]if(!$('#uploadResponse')[0]){$('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body);} [-]setTimeout(function(){$("#uploadResponse").detach()},1);]]>
スクロールが発生しない場合でもスクロールバーを表示させたかった
(ページ推移でスクロールの有無によってレイアウトが微妙に変わるのが嫌い)
なので、スクロールバーが表示される時は、overflow-y:scrollを指定しないようにした
スクロールバーが表示されない時は、そもそもD&Dでスクロールが発生しない
let func = function(){ $('body').css('overflow-y', $(window).height() < $(document).height() ? "initial" : "scroll");]]>
$('#ELEMENT_ID').on("input", function(e){ let value = $(e.currentTarget).val(); // 【制御】半角数字とハイフォンのみ value = value.replace(/[^0-9\-]/g, ""); $(e.currentTarget).val(value); });]]>
年月のみ
$('#ympicker').ympicker({ prevText : '前年' ,nextText : '翌年' ,monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] ,monthNamesShort : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'] ,dateFormat : 'yy-mm' ,yearSuffix : '年' ,yearRange : '-10:+100' });]]>