重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

オートフィルを作成したいのでお力をください。

要件
SELECT要素を3つ用意します。
SELECT① = リーダー名
SELECT② = 従業員名
SELECT③ = 店舗

初期表示 データ例:
田中 佐藤 東京
田中 鈴木 埼玉
田中 谷口 埼玉
村上 加藤 神奈川

とします。

操作イメージは、
リーダー名=田中 を選択時、残りのリストの内容は以下を表示したいです。

従業員名=佐藤・鈴木・田口
店舗  =東京・埼玉
※加藤・神奈川はリストに表示しない

処理のイメージは以下を想定しています。

①jqeryのajaxメソッドを使用
changeイベントで値をサーバーへPOST

②サーバー側で値をSQLのWHERE句に動的に設定
取得結果をレスポンスとして返却

③クライアント側で各SELECT要素に取得データを設定

ここで質問が2つあります。

質問①
田中を動的に設定した場合、
SQL実行時のレコードは以下となり、店舗に埼玉が2つ表示されてしまいます。

田中 佐藤 東京
田中 鈴木 埼玉
田中 谷口 埼玉

上記の場合の店舗の重複排除方法

質問②
レスポンスとして返した3項目を各SELECT要素に全権表示させる方法

以上、どなたかお力をお貸しください、よろしくお願いいたします。

A 回答 (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>
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A