性格悪い人が優勝

つらい・・・

【急募】選択した物件と施設に応じて、ランキング形式で表示する方法。

解決済

  • 質問者：programanman
  • 質問日時：
  • 回答数：1件

どなたかご教授の方よろしくお願いします。。

セレクトボックスを複数個実装し、複数施設と、複数物件情報を含んだ市町村（○○市）を選択した後、ボタンクリックで、物件と複数施設の距離？を計算し、その結果をHTMLに表示（一位：物件１、二位：物件３等）にしたいと考えています。具体的なイメージは以下の通りです。

○○市セレクトボックスを設置
selectbox1
１市（中にデータとして物件１、物件２，物件３の模擬座標入り）
２市（中にデータとして物件３、物件４，物件５の模擬座標入り）
３市（中にデータとして物件６、物件７，物件８の模擬座標入り）

その他セレクトボックス
selectbox2：　スパ１、スパ２、スパ３　//各選択肢にそれぞれの模擬座標データ入り
selectbox3：　コンビニ１，コンビニ２　//以下同文
selectbox4：　病院１，病院２　//以下同文

例えば・・・
selectbox1では、１市を選択。
selectbox2では、スパ１、
selectbox3では、コンビニ１、
selectbox4では、病院１を選択したとします。

ボタンクリックで、これらセレクトボックスの値を取得し、物件１とスパ１，物件１とコンビニ１，物件１と病院１の数値をそれぞれ計算し、それらを足したものを結果とする＆これを物件３まで同様な計算を行い、その結果に応じて、昇順にランキングで表示する実装をしたいと考えています。

※可能であればよろしくお願いします※
【ランキング表示に応じて画像も貼るといったことも実装したいと考えています。
（物件１ならa.jpg、物件2なら.jpgなど）】

長々と長文失礼しました。
もし何か伝わらないところがあればなんでも
質問などしていただけると幸いです。

使用言語はHTML＆CSS,Javascriptです。初学者なため、この言語を利用しています。
皆さまのご回答の程、お待ちしております。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



回答がつかないようなので・・

なさりたいことのイメージはわかりますが、ご質問文を読んでも、肝心の「何を知りたいのか」がわかりません。
詳細も不明なので、無理矢理回答するなら（質問文にもある通りですが）、
　・セレクトボックスを作成し
　・選択時のイベント処理で
　　　・各地点間の距離を計算し
　　　・昇順にして表示する
といった抽象的なものになってしまいます。

丸投げで作成してほしいだけなら、依頼サイトで頼んだ方が、修正等も考えると賢い選択と思われます。
とは言え、限定的な選択肢からの選択で計算することに、あまり実質的な意味を感じられませんけれど・・
（以前にも書いたような気がしますが）地図などから位置を指定して計算させるようなUIであれば、まだわからないでもないですが。


・・・などと書いているだけでは、回答にならないので、ごく簡単なものを作成してみました。
基本となるデータ構造やHTMLも不明な上に、UIなどの詳細もまったくわからないので、全て勝手で適当です。
　・文字数を減らすため、各項目数は2個に減らしてあります
　・距離は平面座標間の直線距離として計算
　・表示は昇順で上位3か所迄（末尾の数値は距離の総和）

※ selectの個数、項目数などは可変ですが、最低でも2個のselecctとそれぞれに1項目以上の項目データが必要です。
※ select数や各selectの項目数が増加するのには特に制限はありません。
※ データ構造やHTMLが変われば、（考え方は使えるかも知れませんが）当然ながら、スクリプトは使えません。
※ 書きっぱなしなので、データや変数名等も適当ですが悪しからず。
※ 実現可能というだけのサンプルみたいなものなので、説明等は省略。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#selects select { width:9em; margin-right:1em; }
</style>
</head>
<body>

<div id="selects"></div>
<div><ol id="result"></ol></div>

<script>
{
const placeData = [
{ title: '市', item: [
{name:'A市', location:[
{ lat:0, lng:0, subname:'物件1', image:'a.jpg'},
{ lat:100, lng:30, subname:'物件2', image:'b.jpg'}
]},
{name:'B市', location:[
{ lat:0, lng:70, subname:'物件4', image:'d.jpg'},
{ lat:100, lng:100, subname:'物件5', image:'e.jpg'}
]}
]},
{ title: 'スパ', item: [
{name:'スパ1', location:{ lat:10, lng:10}},
{name:'スパ2', location:{ lat:90, lng:90}}
]},
{ title: 'コンビニ', item: [
{name:'コンビニ1', location:{ lat:20, lng:10}},
{name:'コンビニ2', location:{ lat:80, lng:90}}
]},
{ title: '病院', item: [
{name:'病院1', location:{ lat:30, lng:20}},
{name:'病院2', location:{ lat:70, lng:80}}
]}
];


const
selects = [],
wrap = document.getElementById('selects'),
result = document.getElementById('result'),
Checker = () => !selects.some( e => e.selectedIndex == 0 ),
Clear = () => { result.innerHTML = ''; },
Distance = (p, q) => Math.sqrt(Math.pow(p.lat-q.lat,2)+Math.pow(p.lng-q.lng,2)),
SumDist = (p, a) => a.map( e => Distance(p, e)).reduce((s, e) => s + e, 0),

CalcList = () => {
const ps = selects.map((e, i) => placeData[i].item[e.selectedIndex-1].location);
const p = ps.shift();
return p.map( e => [ SumDist(e, ps), e ] );
},

DispList = () => {
const list = CalcList();
list.sort( (a, b) => a[0] - b[0] );
for(let i=0; i<Math.min(list.length, 3); i++){
const html = `<li>${list[i][1].subname} <img src="${list[i][1].image}" />
　<small> (${list[i][0].toFixed(2)})</small></li>`;
result.insertAdjacentHTML('beforeend', html);
}
},

Initialize = () => {
for (let p, i = 0; p = placeData[i++];) {
let html = `<select><option value="">--${p.title}を選択--</option>`;
p.item.forEach((d, j) =>{
html += `<option value="${j}">${d.name}</option>`;
});
wrap.insertAdjacentHTML('beforeend', html + '</select>');
selects.push(wrap.lastElementChild);
}
};


Initialize();
wrap.addEventListener( 'change', e =>{ Clear(); if (Checker()) DispList(); });
}
</script>
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
伝え方が不十分なのにもかかわらず、真摯に取り組んでいただきまして
誠にありがとうございます。

試してみた結果、まさに私が実装したいものそのものでした！！
自作でかなり時間をかけてもここまで至らなかったので、
大変感動しております。

よってfujillin様の回答をベストアンサーとさせていただきます。
大変感謝しております。ありがとうございました！！

通報する
お礼日時：2022/01/14 19:54

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報