【お願いします】選択したセレクトボックスの値を取得＆計算して別ページに表示する方法。

どなたか支援の程よろしくお願いいたします。

セレクトボックス形式二つを作り、施設（コンビニ○○店など）一件と、「複数の物件の値」を格納した選択肢（○○市）を選んだあと、ボタンクリックで施設と複数の物件の距離？を比較して、一番近い物件画像やURLを別ページに表示する方法はありますか？

繰り返し処理を使うべきなのかなとは思いますが、その過程に行くまでの方法がわかりません。

現在使っている言語はHTML&CSS、javascriptです。
他の言語も必要であれば使います。
是非教えてください。よろしくお願いいたします。

No.1 ベストアンサー 回答者： sukitaro 回答日時： 2021/12/21 14:47

状況がよく分かりませんが、

簡易的なものでよければこんな感じでしょうか。

<div id="page-1">
<select id="shop">
<option value="a">コンビニA店</option>
<option value="b">コンビニB店</option>
<option value="c">コンビニC店</option>
</select>
<select id="city">
<option value="icity">い市</option>
<option value="rocity">ろ市</option>
<option value="hacity">は市</option>
</select>
<button id="btn" >ボタン</button>
</div>
<div id="page-2">
</div>
<script>
// 施設データ
const conveni = {
a: {x: 99, y: 121},
b: {x: 134, y: 153},
c: {x: 98, y: 150},
}
// 物件データ
const data = {
icity: [
{name: '物件1', x: 123, y: 111},
{name: '物件2', x: 95, y: 191},
{name: '物件3', x: 133, y: 81},
],
rocity: [
{name: '物件4', x: 81, y: 111},
{name: '物件5', x: 95, y: 123},
{name: '物件6', x: 133, y: 123},
],
hacity: [
{name: '物件7', x: 191, y: 161},
{name: '物件8', x: 95, y: 191},
{name: '物件9', x: 143, y: 81},
]};

document.getElementById('btn').addEventListener('click',()=>{
document.getElementById('page-1').style.display = 'none';
const conv = conveni[document.getElementById('shop').value];
const city = data[document.getElementById('city').value]
.map(b => {
b.len = (b.x - conv.x) ** 2 + (b.y - conv.y) ** 2;
return b;
})
.sort((a, b) => a.len - b.len);

document.getElementById('page-2')
.appendChild(Object.assign(document.createElement('ol'),{
innerHTML: city.map(c => `<li>${c.name}</li>`).join('')
}));
},false);

</script>

この回答へのお礼

ご回答ありがとうございます。
自分の実装したい内容で大変助かりました！

この内容に加えて、表示される物件をランキングで表示する方法と
物件名によって画像を表示する方法はありますか？
何度もすみません。。。

お礼日時：2021/12/22 14:46