
どなたかご教授の方よろしくお願いします。。
セレクトボックスを複数個実装し、複数施設と、複数物件情報を含んだ市町村(○○市)を選択した後、ボタンクリックで、物件と複数施設の距離?を計算し、その結果をHTMLに表示(一位:物件1、二位:物件3等)にしたいと考えています。具体的なイメージは以下の通りです。
○○市セレクトボックスを設置
selectbox1
1市(中にデータとして物件1、物件2,物件3の模擬座標入り)
2市(中にデータとして物件3、物件4,物件5の模擬座標入り)
3市(中にデータとして物件6、物件7,物件8の模擬座標入り)
その他セレクトボックス
selectbox2: スパ1、スパ2、スパ3 //各選択肢にそれぞれの模擬座標データ入り
selectbox3: コンビニ1,コンビニ2 //以下同文
selectbox4: 病院1,病院2 //以下同文
例えば・・・
selectbox1では、1市を選択。
selectbox2では、スパ1、
selectbox3では、コンビニ1、
selectbox4では、病院1を選択したとします。
ボタンクリックで、これらセレクトボックスの値を取得し、物件1とスパ1,物件1とコンビニ1,物件1と病院1の数値をそれぞれ計算し、それらを足したものを結果とする&これを物件3まで同様な計算を行い、その結果に応じて、昇順にランキングで表示する実装をしたいと考えています。
※可能であればよろしくお願いします※
【ランキング表示に応じて画像も貼るといったことも実装したいと考えています。
(物件1ならa.jpg、物件2なら.jpgなど)】
長々と長文失礼しました。
もし何か伝わらないところがあればなんでも
質問などしていただけると幸いです。
使用言語はHTML&CSS,Javascriptです。初学者なため、この言語を利用しています。
皆さまのご回答の程、お待ちしております。
No.1ベストアンサー
- 回答日時:
こんにちは
回答がつかないようなので・・
なさりたいことのイメージはわかりますが、ご質問文を読んでも、肝心の「何を知りたいのか」がわかりません。
詳細も不明なので、無理矢理回答するなら(質問文にもある通りですが)、
・セレクトボックスを作成し
・選択時のイベント処理で
・各地点間の距離を計算し
・昇順にして表示する
といった抽象的なものになってしまいます。
丸投げで作成してほしいだけなら、依頼サイトで頼んだ方が、修正等も考えると賢い選択と思われます。
とは言え、限定的な選択肢からの選択で計算することに、あまり実質的な意味を感じられませんけれど・・
(以前にも書いたような気がしますが)地図などから位置を指定して計算させるような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>
ご回答ありがとうございます。
伝え方が不十分なのにもかかわらず、真摯に取り組んでいただきまして
誠にありがとうございます。
試してみた結果、まさに私が実装したいものそのものでした!!
自作でかなり時間をかけてもここまで至らなかったので、
大変感動しております。
よってfujillin様の回答をベストアンサーとさせていただきます。
大変感謝しております。ありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- PHP php my adminより取り出したデータ表示 2 2022/06/15 11:56
- PHP PHP MySql ページング 2 2022/09/20 06:38
- Excel(エクセル) VLOOKUP が機能しない、その原因は何 ? 8 2022/10/19 12:06
- Visual Basic(VBA) エクセルについて教えてください。 3 2023/06/28 09:11
- Access(アクセス) アクセス where句を使用して複数条件抽出をするには 2 2022/08/29 13:24
- 不動産業・賃貸業 同じような物件、同じ位の築年数、同じような設備、同じ位立地が良い(コンビニや駅から近い等)と保証人不 2 2022/07/13 20:06
- Excel(エクセル) EXCELピボットテーブル(複数アイテム) 1 2023/04/27 12:15
- 一戸建て アスベスト物件解体に必要なこと 2 2023/07/12 07:10
- うさぎ・ハムスター・小動物 動物と人間 1 2022/04/08 06:51
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・昔のあなたへのアドバイス
- ・字面がカッコいい英単語
- ・許せない心理テスト
- ・歩いた自慢大会
- ・「I love you」 をかっこよく翻訳してみてください
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・はじめての旅行はどこに行きましたか?
- ・準・究極の選択
- ・この人頭いいなと思ったエピソード
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・【お題】甲子園での思い出の残し方
- ・【お題】動物のキャッチフレーズ
- ・人生で一番思い出に残ってる靴
- ・これ何て呼びますか Part2
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・あなたが好きな本屋さんを教えてください
- ・かっこよく答えてください!!
- ・一回も披露したことのない豆知識
- ・ショボ短歌会
- ・いちばん失敗した人決定戦
- ・性格悪い人が優勝
- ・最速怪談選手権
- ・限定しりとり
- ・性格いい人が優勝
- ・これ何て呼びますか
- ・チョコミントアイス
- ・単二電池
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・泣きながら食べたご飯の思い出
- ・一番好きなみそ汁の具材は?
- ・人生で一番お金がなかったとき
- ・カラオケの鉄板ソング
- ・自分用のお土産
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
3次元空間上の2つの座標から...
-
グラフの交点の求め方(Excel)
-
ダイアログ内コントロールの位...
-
タッチパッドのタッチ座標取得
-
エクセルである点からの距離で...
-
トラスの計算(グローバル座標...
-
エクセルで回転する座標の出し方
-
直線上にある点の座標の求め方
-
シーケンサー(PLC?)で制...
-
3D座標上のベクトルをを2D平...
-
空間上の二点を結ぶ直線上に任...
-
ピクチャボックスの座標取得
-
重力の計算
-
EXCEL VBA でウインドウの...
-
c#で直線が図形内にあるか判定
-
マインクラフト(pc版)で座標...
-
交差する2線分の交点座標の求め方
-
当たり判定後に面に沿って動か...
-
図形が重なりあっているかどうか
-
ガウシアンフィルタのCプログラム
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
グラフの交点の求め方(Excel)
-
マインクラフト(pc版)で座標...
-
3次元空間上の2つの座標から...
-
ワード上Shapeの位置情報を統一...
-
エクセルで回転する座標の出し方
-
ダイアログ内コントロールの位...
-
シーケンサー(PLC?)で制...
-
閉図形の座標の配列が右回りか...
-
始点、終点の二つの座標と半径...
-
多角形の内部かどうか判定する方法
-
エクセルである点からの距離で...
-
Excel VBA で自在に図形を変化...
-
交差する2線分の交点座標の求め方
-
黒体放射軌跡のxy色度座標への...
-
以下のプログラムは重心を求め...
-
VBで、開いているExcelシートの...
-
ピクチャボックスの座標取得
-
SetWindowOrgとSetViewportOrg...
-
スクリーン座標からワールド座...
-
座標を持った平面範囲に座標を...
おすすめ情報