こんにちは。
inputタグで入力されたIDと一致するIDの部署をセレクトに連動して、セレクトボックスに出力
とのことですが、以下のような感じでしょうか?
html
1<span>部署ID:<span><input name="Id" />
2<br />
3<span>部署名:<span>
4<select name="SubId">
5 <option value="0" class="empty-state"></option>
6 <option value="1">営業部</option>
7 <option value="1A">営業1課</option>
8 <option value="1B">営業2課</option>
9 <option value="1C">営業3課</option>
10 <option value="1C1">営業3課1係</option>
11 <option value="1C2">営業3課2係</option>
12
13 <option value="2">開発部</option>
14 <option value="2X">開発部 1課</option>
15 <option value="2Y">開発部 2課</option>
16 <option value="2Z">開発部 企画課</option>
17
18 <option value="3">総務部</option>
19 <option value="3M">総務部人事課</option>
20 <option value="3N">総務部経理課</option>
21
22 <option value="4">広告宣伝部</option>
23 <option value="4E">制作課</option>
24 <option value="4F">媒体管理課</option>
25</select>
javascript
1$(function() {
2
3 const BACKSPACE = 0x08
4
5 $.fn.updateById = function(id) {
6 let displayCount = 0
7 $('option', this).each(function() {
8 if ($(this).val().startsWith(id.toUpperCase())) {
9 $(this)
10 .css('display', 'block')
11 .prop('selected', displayCount === 0);
12 displayCount ++
13 }
14 else {
15 $(this)
16 .css('display', 'none')
17 .prop('selected', false)
18 }
19 })
20 $('option.empty-state', this).text(displayCount === 0 ? '該当なし' : '')
21 this.prop('disabled', displayCount === 0)
22 }
23
24 $('input[name="Id"]')
25 .keyup(function(e) {
26 if(e.keyCode === BACKSPACE) {
27 $('select').updateById($(this).val())
28 }
29 })
30 .keypress(function(e) {
31 const id = `${this.value}${String.fromCharCode(e.keyCode)}`
32 $('select').updateById(id)
33 })
34})
上記のサンプルでは、以下のように動作します。
- 初期表示では、すべての option が select の中に表示される。
- input に例えば、
1
と打つと、 value が 1
で始まる option のみが表示される。
- 続けて
A
と打つと、 value が 1A
で始まる option のみが表示される。
- 続けてバックスペースを打つと、 value が
1
で始まる option 表示に戻る。
- 該当のない IDを input に打つと、select に「該当なし」と表示され、disabledになる。
なお、上記のサンプルでは、複数の候補のoption の中からひとつを選んだときに、そのoption の value で input の内容を更新することは未対応です。
以上、参考になれば幸いです。