質問: '') { $Id.attr('disabled', 'disabled'); } else { $Id.removeAttr('disabled'); } } }); }); ``` inputタグで入力された値により、セレクトボックスの出力項目を変動させたいです。 inputタグで入力されたIDと一致するIDの部署をセレクトに連動して、セレクトボックスに出力したいですが、どのようにしたらいいでしょうか? 自分の書いたjsではconsole.log()をしても結果が表示されませんでした。 各部署は多数存在し、その中の一致した条件のみ出力、一致しなかった場合は出力しないセレクトボックスをつくりたいです。どのようなjsを書くのか教えていただきたいです。
回答: こんにちは。 > > inputタグで入力されたIDと一致するIDの部署をセレクトに連動して、セレクトボックスに出力 > > > とのことですが、以下のような感じでしょうか? ``` 部署ID: 部署名: 営業部 営業1課 営業2課 営業3課 営業3課1係 営業3課2係 開発部 開発部 1課 開発部 2課 開発部 企画課 総務部 総務部人事課 総務部経理課 広告宣伝部 制作課 媒体管理課 ``` ``` $(function() { const BACKSPACE = 0x08 $.fn.updateById = function(id) { let displayCount = 0 $('option', this).each(function() { if ($(this).val().startsWith(id.toUpperCase())) { $(this) .css('display', 'block') .prop('selected', displayCount === 0); displayCount ++ } else { $(this) .css('display', 'none') .prop('selected', false) } }) $('option.empty-state', this).text(displayCount === 0 ? '該当なし' : '') this.prop('disabled', displayCount === 0) } $('input[name="Id"]') .keyup(function(e) { if(e.keyCode === BACKSPACE) { $('select').updateById($(this).val()) } }) .keypress(function(e) { const id = `${this.value}${String.fromCharCode(e.keyCode)}` $('select').updateById(id) }) }) ``` * **動作確認用 CodePen:** 上記のサンプルでは、以下のように動作します。 * 初期表示では、すべての option が select の中に表示される。 * input に例えば、`1` と打つと、 value が `1`で始まる option のみが表示される。 * 続けて `A` と打つと、 value が `1A`で始まる option のみが表示される。 * 続けてバックスペースを打つと、 value が `1`で始まる option 表示に戻る。 * 該当のない IDを input に打つと、select に「該当なし」と表示され、disabledになる。 なお、上記のサンプルでは、複数の候補のoption の中からひとつを選んだときに、そのoption の value で input の内容を更新することは未対応です。 以上、参考になれば幸いです。