テキストボックスの入力の内容によってDropDownList選択値を変更させたい

Question

前提・実現したいこと

お世話になります。

社内システムの改修を行っていますが、どうしてもできなくてどなたか教えてください。

・やりたいこと
左側にテキストボックスに、会社コードを入力すると右側のリストに会社コードに相応する値を選択させるようにしたいです。

発生している問題・エラーメッセージ

テキストボックスにコードを入力しても選択値は変更しません。

該当のソースコード

self.searchCodeTest = function (data, event) {
code = $("#searchCompanyCode").val();
$("#option[value='" + code + "']", $("#ListCompanyCode"))　⇒ここの書き方がおかしいと思われる。
}

・・省略・・

<td> @Html.TextBox("searchCompanyCode", Model.CompanyCode, new { data_bind = "event:{keyup: searchCodeTest}" }) @Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsValue: currentDatas.company.code, optionsText: 'longName', optionsCaption: '-選択してください-'" }) </td>

$root.masters.company⇒ControllからViewに返しているリスト
currentDatas.company.codey⇒ControllからViewに返している

上記でHTML文で、選択値変更以外は問題なく処理できています。@Html.DropDownList()の()の中で選択値の書き方ができてないように思います。

うまく書けてないかも知りませんが、よろしくお願いします。

Comments

[episteme]

tagがCになってるけど、コレCじゃない。

[koko5899]

申し訳ありません。修正しました。

Answer 1

JQueryを用いているのであれば、選択肢を表示・非表示を切り替えるだけという簡単な方法があります。

参考になれば・・・。

（検索する会社コードのinput要素「id = searchCompanyCode」、ドロップダウン要素「id = ListCompanyCode」という前提で書いています。）

let code = $("#searchCompanyCode").val(); // 検索値取得
$('#ListCompanyCode option[value="' + code + '"]').show(); // 非表示状態かもしれないので表示に切り替え
$('#ListCompanyCode option[value!="' + code + '"]').hide(); // 不要な選択肢を非表示

Comments

[koko5899]

回答ありがとうございます。下記の通り書いてみましたが、だめでした。
self.searchCodeTest = function (data, event) {
code = $("#searchCompanyCode").val();
$('#ListCompanyCode option[value="' + code + '"]').show()
$('#ListCompanyCode option[value="' + code + '"]').hide()
}

[hiro_app]

どうダメだったのでしょうか？

エラーが出ている？ → エラー内容と解決に必要なソースの提示をお願いします
この処理はちゃんと呼び出されていますか？ → ご自身のソースの見直しを
この処理実行直後に処理を停止させた場合でも同じですか？ → 停止させ不要項目が消えているなら上書きしている処理がいる。消えていないならIDなどセレクタが誤っているなど複数の原因有

alertやconsole.logを設置して、現状がどうなっているのか把握し、詳細な報告をしてください。

[hiro_app]

ちなみに、ソースに誤りがありますよ

code = $("#searchCompanyCode").val();
$('#ListCompanyCode option[value="' + code + '"]').show()
// $('#ListCompanyCode option[value="' + code + '"]').hide()
$('#ListCompanyCode option[value!="' + code + '"]').hide() // 否定条件が正しい
}

[koko5899]

回答ありがとうございます。できました。
既存コードでDropDownListのoptionsValueの指定が間違っていました。
変更後
@Html.DropDownList("ListCompanyCode", emptyList, new { data_bind = "options: $root.masters.company, optionsValue: 'code’, optionsText: 'longName', optionsCaption: '-選択してください-'" })

Jqueryの部分は下記のようにしました。
self.searchCodeTest = function (data, event) {
code = $("#searchCompanyCode").val();
$("#ListCompanyCode").val(code);
}