inputタグとselectボックスの連動jsをつくりたい

Question

 <input name="Id" onchange="function()"> 
 <select name="SubId"><option></option>
 </select> 

$(function() {
	$('input[name="Id"]').on('change',function(){
  var $Id = $('.Id');
  var original = $Id.html();

  $('.Id').change(function() {
    var val1 = $(this).val();

    $Id.html(original).find('option').each(function() {
      var val2 = $(this).data('val');
      if (val1 != val2) {
        $(this).not('optgroup,.msg').remove();
      }
    });

    if ($(this).val() === '') {
      $Id.attr('disabled', 'disabled');
    } else {
      $Id.removeAttr('disabled');
    }
  }
  });
});

inputタグで入力された値により、セレクトボックスの出力項目を変動させたいです。
inputタグで入力されたIDと一致するIDの部署をセレクトに連動して、セレクトボックスに出力したいですが、どのようにしたらいいでしょうか？
自分の書いたjsではconsole.log()をしても結果が表示されませんでした。
各部署は多数存在し、その中の一致した条件のみ出力、一致しなかった場合は出力しないセレクトボックスをつくりたいです。どのようなjsを書くのか教えていただきたいです。

Comments

[x_x]

「出力しないセレクトボックスをつくりたい」というのはどういうことでしょうか？
選択肢がないということですか？

[m.ts10806]

> onchange="function()"

これ不要な気がします。jQueryのon()でchange呼び出してますし、そもそも「function」という名前の関数を呼び出していることになるので。
ただ、予約語なので、そこは気にした方が良いと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words

Answer 1

こんにちは。

inputタグで入力されたIDと一致するIDの部署をセレクトに連動して、セレクトボックスに出力

とのことですが、以下のような感じでしょうか？

<span>部署ID：<span><input name="Id" />
<br />
<span>部署名：<span>
<select name="SubId">
  <option value="0" class="empty-state"></option>
  <option value="1">営業部</option>
  <option value="1A">営業1課</option>
  <option value="1B">営業2課</option>
  <option value="1C">営業3課</option>
  <option value="1C1">営業3課1係</option>
  <option value="1C2">営業3課2係</option>

  <option value="2">開発部</option>
  <option value="2X">開発部 1課</option>
  <option value="2Y">開発部 2課</option>
  <option value="2Z">開発部 企画課</option>
  
  <option value="3">総務部</option>
  <option value="3M">総務部人事課</option>
  <option value="3N">総務部経理課</option>

  <option value="4">広告宣伝部</option>
  <option value="4E">制作課</option>
  <option value="4F">媒体管理課</option>
</select> 

$(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: https://codepen.io/jun68ykt/pen/QWWwzdP?editors=1010

上記のサンプルでは、以下のように動作します。

• 初期表示では、すべての option が select の中に表示される。
• input に例えば、1 と打つと、 value が 1で始まる option のみが表示される。
• 続けて A と打つと、 value が 1Aで始まる option のみが表示される。
• 続けてバックスペースを打つと、 value が 1で始まる option 表示に戻る。
• 該当のない IDを input に打つと、select に「該当なし」と表示され、disabledになる。

なお、上記のサンプルでは、複数の候補のoption の中からひとつを選んだときに、そのoption の value で input の内容を更新することは未対応です。

以上、参考になれば幸いです。

Comments

[退会済みユーザー]

凄いですね！！ありがとうございますm(__)m　時間がかかっておりますが、只今解読中です。。わからないところがありましたら、また質問させてくださいm(__)m

[jun68ykt]

コメントありがとうございます。
いろいろ思い込みで作っている部分もありますので、何かお気づきの点などありましたら、またコメント頂ければと思います。

[退会済みユーザー]

すいません、ネットでいろいろしらべたのですが理解できなくお聞きしたいのですが、const BACKSPACE = 0x08はどのような処理をしているのか教えていただけますでしょうか？

[jun68ykt]

> const BACKSPACE = 0x08

についてですが、右辺の 0x08 という値は

アスキー制御文字
https://ja.wikipedia.org/wiki/ASCII#ASCII制御文字
の表の中の 16進数の 08 （10進数でも 8 ) である、バックスペース(表では BS と略）のASCIIコードです。
上記では、このバックスペースのASCIIコードである16進数の 08 を BACKSPACEという変数に代入して、keyupイベントの発生時に、以下のように

.keyup(function(e) {
if(e.keyCode === BACKSPACE) {

そのイベントの発生元である（キーボードの）キーのコードと比較し、等しければ、つまりバックスペースキー（キートップにBSと印字されているキー）が押されて離されたならば、後続の処理をするようにしています。

[退会済みユーザー]

なるほど！！そうなんですね！！ほんと助かりました！！ありがとうございますm(__)m

[jun68ykt]

どういたしまして。疑問が解消されたようで、よかったです????

[退会済みユーザー]

有難うございます！！m(__)m