• 締切済み
  • すぐに回答を!

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

タイトルが意味不明ですが、要するに、 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>

共感・応援の気持ちを伝えよう!

  • JavaScript
  • 回答数1
  • 閲覧数65
  • ありがとう数0

みんなの回答

  • 回答No.1

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

共感・感謝の気持ちを伝えよう!

質問者からの補足

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

関連するQ&A

  • 運賃計算のプログラムを作っています。

    運賃検索のプログラムを作っています。例えば、中百舌鳥駅と深井駅を選択の順番を入れ替えても結果を同じにしたいです。 独自調査の結果、文字でやるより、数字でやったほうがsort関数が機能して、小さいもの順になって、挙動を同じにしやすいということが分かったので、文字→数字に変更しました。 そのsort関数を使った場合、 const vals = { 'sb01sb02':3.7, 'nakamozuizumigaoka':7.8, 'a0b0': 1.2, 'a0b1': 12, 'a0b2': 28.8, }, len = [ 3, 6, 15, 30, 50], prc = [140,160, 200, 250, 500], f=(,l=Math.round())=>D.textContent=l?prc[len.findIndex(=>>l)]+'円':''; A.addEventListener('change',_=>f(vals[B.value+C.value])); この挙動が動くようにしていただきたいです。 要するに関数を使用した後に関数を使用することはできないかということです。 それって今のプログラミングではできないのでしょうか。お力添えをいただきたいです。 それが無理なら、 const vals = { 'sb01sb02':3.7, 'nakamozuizumigaoka':7.8, 'a0b0': 1.2, 'a0b1': 12, 'a0b2': 28.8, },の'sb1sb2':3.7,の部分で、二度書きにならないようにする方法を試したいのです。 自分は、'sb01sb02'&'sb02sb01'や、&を二度書き連ねた方法、=をつなげた方法、二度書き連ねた方法などやってみましたが駄目でした。 も泣き寝入りです。 <!DOCTYPE html> <meta charset="utf-8"> <title></title> <style> </style> <body> <p id=A> <select id=B> <option value="">-- <option value="sb01">中百舌鳥 <option value="sb02">深井 <option value="sb03">泉ケ丘 <option value="sb04">栂・美木多 <option value="sb05">光明池 <option value="a0">a0 <option value="a1">a1 <option value="a2">a2 </select> <select id=C> <option value="">-- <option value="sb01">中百舌鳥 <option value="sb02">深井 <option value="sb03">泉ケ丘 <option value="sb04">栂・美木多 <option value="sb05">光明池 <option value="b0">b0 <option value="b1">b1 <option value="b2">b2 </select> </p> <p id=D></p> <script> const vals = { 'sb1sb2':3.7, 'nakamozuizumigaoka':7.8, 'a0b0': 1.2, 'a0b1': 12, 'a0b2': 28.8, }, len = [ 3, 6, 15, 30, 50], prc = [140,160, 200, 250, 500], f=(_,l=Math.round(_))=>D.textContent=l?prc[len.findIndex(_=>_>l)]+'円':''; A.addEventListener('change',_=>f(vals[B.value+C.value])); </script> 例えば起点駅を0として、ほかの駅に数字を張っておくとか、中百舌鳥~深井間をifで、最初に距離を与えておくとかいらないです。

  • セレクトボックスのN番目を選択したい

    <select id="foo"> <option value="a">a</option> <option value="b">b</option> ... </select> ここで例えばjQueryを使って"b"を選択させるには $("#foo").val('b'); ですが、「上からN番目を選択させる」「一番下を選択させる」等位置で指定したいときはどうすれば良いですか?

  • セレクトボックスの操作について

    セレクトボックスの操作について 3つのセレクトボックスのうち、どれかを変更すると同じテキストのものに 残りの2つのセレクトボックスを変更したいと思っております。 同じテキストが無ければ<option value="">----------</option>をcheckedにしたいと 考えているのですが、どなたかご教授いただければと思います。 [変更したいhtml] <select name="house_kouzou_a" id="house_kouzou_a" class="a"> <option value="">----------</option> <option value="1">木造</option> <option value="2">鉄筋</option> </select> <select name="house_kouzou_b" id="house_kouzou_b" class="b"> <option value="">----------</option> <option value="1">木造</option> <option value="2">鉄筋</option> </select> <select name="house_kouzou_c" id="house_kouzou_c" class="c"> <option value="">----------</option> <option value="1">木造</option> <option value="3">鉄筋</option> <option value="4">その他</option> </select>

  • セレクトボックスの「選択してください」選択しても、未選択として扱いたい

    メールフォームを作成しています。 CGIのメールプログラムを使って、セレクトボックス「A」を必須入力項目としたのですが、一番上のものが「選択されている」とみなされてしまい、改めて選択しなくても、メールが送信できてしまいます。 <select name="A"> <option value="選択してください"> 選択してください</option> <option valui="1">1</option> <option valui="2">2</option> <option valui="3">3</option> <option valui="4">4</option> </select> どうしたらいいでしょうか。 助けて下さる方、お待ちしております。

    • ベストアンサー
    • HTML
  • <SELECT>タグでの selectを→間違い

    <SELECT>タグでの selectを初めに表示させたいのですが、 できますでしょうか。 先の質問、文を間違えました、すいません。 訂正します。 cが選択状態で、何も表示されず、 以下のbを選べば、2が表示されますが、 何も選んでいないとき、cを選択した状態で、 3を表示させておきたいのですが 可能でしょうか。 onloadで、読みだす方法とかで可能なのでしょうか。 よろしくおねがいいたします。 <p> <form name="test"> <select name="linkselect" onChange="n()"> <option value="">選択して下さい</option> <option value="1">a</option> <option value="2">b</option> <option value="3"selected>c</option> </select> </form> </p>

  • セレクトボックスの選択項目を変える

    セレクトボックスの選択項目を変えるには どうすればいいですか? <FORM action=./ method=post> <SELECT name=server> <OPTION value=2 selected>2</OPTION> <OPTION value=3>3</OPTION> <OPTION value=4>4</OPTION> </SELECT> </FORM> こういうフォーム(FORMやOPTIONにnameがない)で [4]を選択したいです このフォームを書き換えないで(スクリプトでの書き換えなら○) どうにか変えることはできないでしょうか? IEのみの対応でいいので、お願いします

  • セレクトボックスで選択された内容での切り替え

    こんにちは。 日にちを選択するセレクトボックスAと、 時間を選択するセレクトボックスB、Cを用意します。 はじめはAとBが表示されている状態です。 Aを選択したときに、 Aのボックスの中身が土日ならば、Bを消して(display:none)Cを表示させ、 Aのボックスの中身が平日ならば、そのままBを表示させたいです。 何度も日にちを変更してもB、Cの切り替えをおこないたいんです。。 しかも同じものを3つ用意したいんです。 一つ目はなんとか動くんですが、 二つ目と三つ目がうまく動きません。 一つ目のAが平日の場合だと、二つ目と三つ目のAが土日であっても平日の表示 (この場合セレクトボックスBが表示)されてしまいます。。。 初心者です。。なにかアドバイスなどいただけませんでしょうか?? 書き方も手探りなんで、ぐちゃぐちゃかと思います。。赤を入れて頂けると幸いです。。 現状はこんな感じです。。 select.mfpはセレクトボックスA .time01はセレクトボックスB .time02はセレクトボックスCです。 $("select.mfp").change(function () { var str = $("select.mfp option:selected").text(); var STR =str.charAt(12); // if (STR=="土" || STR=="日"){ // $(this).parent().children(".time02").css( 'display', 'block' ) // $(this).parent().children(".time01").css( 'display', 'none' ); // }else{ // $(this).parent().children(".time01").css( 'display', 'block' ) // $(this).parent().children(".time02").css( 'display', 'none' ) // } }).change(); -------HTML------------ <tr class="mfptr"> <td id="second"><!--<input type="hidden" name="ご予約日[join]年+月+日+時間+分" value="" />--> <p class="float">●第一希望 </p> <script type="text/javascript" src="./contact/commons/choice_date.js"></script> (↑これで日付のセレクトボックスを生成しています。) <select name="時間" class="mfp time01"> <option value="時間">時間</option> </select> <select name="時間" class="mfp time02"> <option value="時間2">時間2</option> </select> </td> </tr> 解りづらくてすみません。。 宜しくお願いします。

  • セレクトボックスについて

    <script type="text/javascript"> function entryChange(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == '0'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '1'){ document.getElementById('selectbox1').style.display = ""; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = "none"; } if(id == '2'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = ""; document.getElementById('selectbox3').style.display = "none"; } if(id == '3'){ document.getElementById('selectbox1').style.display = "none"; document.getElementById('selectbox2').style.display = "none"; document.getElementById('selectbox3').style.display = ""; } } } window.onload = entryChange; </script> ↑こちらは表示/非表示の処理をしています。 <select id="changeSelect" name="number" onchange="entryChange();"> <option value="0">未選択</option> <option value="1">リスト1</option> <option value="2">リスト2</option> <option value="3">リスト3</option> </select> <select name="number" id="selectbox1" style="display:none"> <option value="東京都">東京都</option> <option value="京都府">京都府</option> </select> <select name="number" id="selectbox2" style="display:none"> <option value="北海道">北海道</option> <option value="沖縄県">沖縄県</option> </select> <select name="number" id="selectbox3" STYLE="display:none"> <option value="兵庫県">兵庫県</option> <option value="大阪府">大阪府</option> </select> <input type="submit" value="送信"> (1)「未選択」のまま送信すると「大阪府」が送信されます。 (2)「リスト1」→「沖縄県」を選択 「大阪府」が送信されます。(リスト2も同じ事になります。) (3)「リスト3」→「兵庫県」を選択 「兵庫県」と送信されます。 リスト3以外を選択するとなぜか「大阪府」が送信されます。 初心者なりに色々調べたのですが解決できず困っております。 よろしくお願いします。

  • iPhoneでセレクトボックスが選択できない

    スマートフォンにも表示対応している、フォームを作成しています。 セレクトボックスがあり、希望の値を選択するような項目があります。 <select name="sentaku"> <option value="A" selected>A</option> <option value="B">B</option> </select> ブラウザでも(IE9、crome)、iPhone5でも表示はされますが、 iPhone5で表示した場合、選択項目はグリグリって項目を選べる感じにはなるのですが、 項目をタップしても、決定されず、右上の完了を押さないと選択が決定されません。 ネットで検索し、メタタグ"viewport"をwidth=device-widthにしたり、width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no で試していますが、選択項目に関しては、項目名タップで決定できない状態です。 ページのURLを記載できないので、上記イメージだけで申し訳ありませんが、どなたかお解りになる方、宜しくお願い致します。

  • セレクトメニュー選択でもう一つセレクトメニューを出す

    「ブロック名」のセレクトメニューを選択すると、選択した項目によってもう一つ「部署名」のセレクトメニューが出て選択するようにしたいと思い、途中まで作成しました。 しかし、「ブロック名」を「Aブロック」選択しても「部署名」が「Bトップ~」が出てしまいます。 何がおかしいのか分からないので、ぜひ教えてください。 よろしくお願いいたします。 menuItem = [  ["Aトップ","A本部","B本部","C本部"], ["Bトップ","1本部","2本部","3本部"], ["Cトップ","あ本部","い本部","う本部"],         ["Dトップ","●本部","▲本部","◆本部"] ]; function setMenuItem(n) { len = document.form2.BUSYO.options.length; for (i=0; i<len; i++) { document.form2.BUSYO.options[i] = null; } document.form2.BUSYO.style.visibility = "visible"; for (i=0; i<menuItem[n].length; i++) { document.form2.BUSYO.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } ---------------------------------------------------------------- <SELECT size="1" name="Block" onChange="setMenuItem(this.selectedIndex)"> <OPTION selected value="0">選択してください</OPTION> <OPTION value="a-block">Aブロック</OPTION> <OPTION value="b-block">Bブロック</OPTION> <OPTION value="c-block">Cブロック</OPTION> <OPTION value="d-block">Dブロック</OPTION> </SELECT> <SELECT size="1" name="BUSYO" style="visibility:hidden"> <OPTION selected value="0">選択してください</OPTION> </SELECT>