• 締切済み

セレクトボックスで、逆順に選択しても同じにしたい

タイトルが意味不明ですが、要するに、 1つ目の選択肢に、中百舌鳥、深井、泉ケ丘、栂・美木多、光明池とあります。 2つ目の選択肢にも、同じように、中百舌鳥、深井、泉ケ丘、栂・美木多、光明池とあります。 これを、例えば、選択肢1で中百舌鳥、2で深井を選択したときと、逆の場合、 選択肢1で深井、2で中百舌鳥を選んだ場合とで、挙動が同じになるようにしたいです。 ちなみに結果は、190円と返ってきます。 どのようにしたらいいですか。 jsの部分は抜かさず記述してください。 以下はその文です。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <p id=A> <select id=B> <option value="">-- <option value="nakamozu">中百舌鳥 <option value="fukai">深井 <option value="izumigaoka">泉ケ丘 <option value="togamikita">栂・美木多 <option value="komyoike">光明池 <option value="a0">a0 <option value="a1">a1 <option value="a2">a2 </select> <select id=C> <option value="">-- <option value="nakamozu">中百舌鳥 <option value="fukai">深井 <option value="izumigaoka">泉ケ丘 <option value="togamikita">栂・美木多 <option value="komyoike">光明池 <option value="b0">b0 <option value="b1">b1 <option value="b2">b2 </select> </p> <p id=D></p> <script> const vals = { 'nakamozufukai':3.7, 'nakamozuizumigaoka':7.8, 'a0b0': 1.2, 'a0b1': 12, 'a0b2': 28.8, }, len = [ 2, 4, 6, 8, 10], prc = [170,190, 210, 230, 250], f=(_,l=Math.round(_))=>D.textContent=l?prc[len.findIndex(_=>_>l)]+'円':''; A.addEventListener('change',_=>f(vals[B.value+C.value])); </script>

みんなの回答

回答No.1

その作り方ならあまり考えず、 a,bで見つかったらそれを返して、 ないなら b,aで検索した結果を返す。 を間に挟めばいいだけだと思います。 理想は、 <option value="nakamozu">中百舌鳥 これのvalueを数字にしてしまって、絶対に 「数字順」にすることで、ソートができるわけですが。 文字なのでそれもできなそうなので。 数字にした場合は、アンスコでも加えて "_"+a+"_"+b で宣言しちゃえば、必ず小さい順になるので、 「料金表」問題もシンプルにまとまるかと。 (議事録は見てるので、何がしたかったのかは、  わかったうえでの回答ですので)

semboku_love
質問者

補足

では、value=nakamozuをvalue=数字にした場合、sort関数を使えば、配列が逆でも同じ挙動にすることが可能ですが、そのコードをご回答ください。 もちろんjsのコードすべてです。