オートフィルを作成したいのでお力をください。
要件
SELECT要素を3つ用意します。
SELECT① = リーダー名
SELECT② = 従業員名
SELECT③ = 店舗
初期表示 データ例:
田中 佐藤 東京
田中 鈴木 埼玉
田中 谷口 埼玉
村上 加藤 神奈川
とします。
操作イメージは、
リーダー名=田中 を選択時、残りのリストの内容は以下を表示したいです。
従業員名=佐藤・鈴木・田口
店舗 =東京・埼玉
※加藤・神奈川はリストに表示しない
処理のイメージは以下を想定しています。
①jqeryのajaxメソッドを使用
changeイベントで値をサーバーへPOST
②サーバー側で値をSQLのWHERE句に動的に設定
取得結果をレスポンスとして返却
③クライアント側で各SELECT要素に取得データを設定
ここで質問が2つあります。
質問①
田中を動的に設定した場合、
SQL実行時のレコードは以下となり、店舗に埼玉が2つ表示されてしまいます。
田中 佐藤 東京
田中 鈴木 埼玉
田中 谷口 埼玉
上記の場合の店舗の重複排除方法
質問②
レスポンスとして返した3項目を各SELECT要素に全権表示させる方法
以上、どなたかお力をお貸しください、よろしくお願いいたします。

No.1ベストアンサー
- 回答日時:
こんにちは
内容がイマイチよくわかりませんけれど、とりあえず「質問」と書いてある部分について。
>質問①
重複を除いてユニークな項目のみにしたければ、オブジェクトやMapを利用してkeyとして代入すれば、重複のないものを得ることができます。
>質問②
具体的な方法としては、option要素を再設定すれば良いだけですけれど・・
>3項目を各SELECT要素に全権表示させる方法
>※加藤・神奈川はリストに表示しない
全部を表示するのか、表示中のものだけを表示するのかどちらなのでしょうねぇ?
実際にどのような機能を想定しているのかもわかりませんけれど、上記のどちらかに統一すると使い勝手が悪そうに思いましたので、以下では勝手な解釈にしています。(参考なので)
※ 最初のセレクト要素だけを別扱いをするようにしていますので、
若干複雑になっています。
※ 多分、違和感はないのではと思いますが、クリア(=初期表示)等
の機能が欲しくなるかもしれません。
(最初のセレクトに空白を加えておくか、セレクトをクリアして再表示
すれば、初期表示ができます。)
また、ajaxで取得するデータ構造も不明ですし、表示形式も不明なのでそのあたりに関しても適当です。
考え方のご参考にでもなれば・・
(以下では、データは初期値として配列で直接設定してあります)
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
select { width: 4em; margin: 0 1.5em 0 .3em; }
#data { margin-top: 1em; }
#data td { width: 5em; }
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const data = [
['田中','佐藤','東京'],
['田中','鈴木','埼玉'],
['田中','谷口','埼玉'],
['村上','加藤','神奈川']
];
const
tbl = document.getElementById('data'),
sels= [...document.querySelectorAll('#selects select')],
IBE = (e, s) => {e.insertAdjacentHTML('beforeend', s)},
SetOpt = (s, i, d) => {
const o = new Map();
d.forEach(e => { o.set(e[i], 1) });
s.innerHTML = '';
o.forEach((v, k) => { IBE(s,`<option value="${k}">${k}</option>`)});
},
Disp = evt => {
const selv = sels.map(s => s.value);
if(evt && sels[0] == evt.target) selv.fill('',1);
// 該当データ抽出
const fd = data.filter( d =>
selv.map((v, i) => v?v == d[i]:1).reduce((a, b) => a * b, 1)
);
// 選択肢をセット
sels.forEach( (s, i) => {
if(i) s.disabled = !selv[0];
SetOpt(s, i, i?fd:data);
s.value = selv[i];
});
// 抽出データを表示
tbl.innerHTML = '';
fd.forEach(d => { IBE(tbl, `<tr><td>${d.join('<td>')}`);
});
};
document.getElementById('selects').addEventListener('change', Disp);
Disp();
});
</script>
</head>
<body>
<div id="selects">
リーダー名<select></select>
従業員名<select></select>
店舗<select></select>
</div>
<table id="data"></table>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) 重複や複数条件でのカウント教えて下さい。 3 2023/11/02 03:30
- C言語・C++・C# c言語の問題です 2 2023/07/21 10:51
- Excel(エクセル) Excelマクロ 差分抽出の方法が知りたいです。 2 2023/03/07 13:25
- PHP MySql PHP 2つのテーブルをJOINで結合 user_idで抽出 1 2023/01/03 14:04
- Excel(エクセル) EXCELマクロ 最下行のセルの数字をコピペして、最後にその数字に1を足した数を入力 1 2024/01/12 10:34
- その他(データベース) 【至急】Accessのフィールドの値による条件分岐 1 2024/07/11 23:02
- PHP PHPでCSVを出力するさいに、ループの中で前の行の値を変更したい 1 2022/10/27 14:21
- Visual Basic(VBA) 先ほど、回答者様によって教えていただいたのですがどうしたらいいか分かりません。 ユーザーフォーム上に 2 2023/02/21 22:25
- MySQL 共通点はあります。何が違うのでしょうか? 1 2023/01/27 05:22
- 電車・路線・地下鉄 定期券について 2 2023/06/11 19:24
このQ&Aを見た人はこんなQ&Aも見ています
-


プログラミングについて プログラミングの練習(勉強)ができるようなサイトなどありませんか? あれば教
その他(プログラミング・Web制作)
-


c++の勉強方法を教えてくださいプログラミングをやった事がなく1から勉強を始めようと思います1日1時
C言語・C++・C#
-


<tr>指定した表の行要素をボタンクリック後に表示させる方法
JavaScript
-
-
4

アップロードファイルを表示するためにはどうすればよいでしょうか?
PHP
-
5

Web初心者です。 簡易的なWebページを作成し
その他(プログラミング・Web制作)
-
6

jqueryのselect2で検索欄の文字が消せない
JavaScript
-
7

webディベロッパーについて詳しい方教えてくたまに…詳しく書かれているサイトでもいいので教えてくださ
HTML・CSS
-
8

企業用のブログで何を書けばいいのかわかりません・・・
SEO
-
9

検索1位なのに依頼がない
SEO
-
10

MediaRecorderで録音した音声を<audio>で再生しようとするとiPhoneでエラーにな
JavaScript
-
11

至急助けてください!!!あと2時間しかないです! ボタンを押したら0ランプが点灯し、コンマ5秒後に1
その他(プログラミング・Web制作)
-
12

EJSを仕事でなんとなくで使っているので、もっと体系的に学びたいのですが、おすすめの本やサイトを教え
HTML・CSS
-
13

Javascript で条件分岐を使い共通コードをまとめる方法が分かりません
JavaScript
-
14

php コールバック関数
AJAX
-
15

htmlが簡単に作成できるアプリについて
HTML・CSS
-
16

html 階層を下げると3分割画面が1画面になる
HTML・CSS
-
17

submitで思うようにページが遷移しない
PHP
-
18

Web画面の文字をVB6で取得したい
Visual Basic(VBA)
-
19

プログラミングの進学について
その他(プログラミング・Web制作)
-
20

[Excel VBA]特定の条件で文字を削除&残す処理をするファイルを作成したいです
Visual Basic(VBA)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワードでA3横の画面にして、文...
-
バッチファイル 特定ウインドウ...
-
正規表現で、特定の文字列を含...
-
入力フォームの値をQRコードで...
-
1枚の画像をクリックすると複数...
-
Pythonを無料(安価)で学ぶ方...
-
PDFを(htmlのように)無限に縦...
-
GASでスプレッドシートの一番上...
-
jQueryで入力テキスト付きのモ...
-
非同期通信を使うタイミングが...
-
RPA(PowerAutomate)の実装について
-
Ajax React Jqueryの位置づけと...
-
C言語のflagの使い方が分かりま...
-
bxsliderで最初に縦に複数表示...
-
bxsliderで複数のvimeoスライド...
-
php コールバック関数
-
ナイトボットのAliasについて
-
これってなんの電話かわかりま...
-
VBAでクイズゲームの作り方
-
以下のURL入れますか?皆さんは↓
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
PDFを(htmlのように)無限に縦...
-
正規表現で、特定の文字列を含...
-
バッチファイル 特定ウインドウ...
-
入力フォームの値をQRコードで...
-
GASでスプレッドシートの一番上...
-
1枚の画像をクリックすると複数...
-
ワードでA3横の画面にして、文...
-
VBA コンボボックスの値をスピ...
-
webページの特定の部分だけ消し...
-
C言語のflagの使い方が分かりま...
-
自作の地図をグーグルマップの...
-
二つのbxsliderをレスポンシブ...
-
Ajax サーバーに負荷かかります...
-
これってなんの電話かわかりま...
-
非同期通信で掲示板を作る際の...
-
RPA(PowerAutomate)の実装について
-
スライドを最後の画像で止めたい
-
bxsliderで最初に縦に複数表示...
-
jQuery を外部ファイルから呼び...
-
車に、ネズミ取りや覆面パトカ...
おすすめ情報









