プルダウンメニューで別画面に移動するには

Question

1つの商品に対して複数の価格表があるのでそちらをサイトに載せたいのですが、
量が多いため矢印を押すと表示されるような形（ドロップダウンリスト？）で、
選択するとそのページに飛ぶといった形が理想です。※別ページとして
例）商品●●
価格表AA
価格表BB
価格表CC

現在は、商品●●のページにAA/BB/CCの価格表を載せる形です。
（いずれは、価格表まとめページを作り、1ページに商品●●（AA/BB/CC）、
商品△△（DD/EE/FF）ナビをつけるかもしれませんが、現時点では上記の形希望です。）

現在下記コードでは、別ページ（タブ）が開く形で良いのですが、
ポップアップ形式だとスマートフォンだと不具合もあり別の方法にしたいのです。

<form id="lookup_form" method="POST">
<select name="linklist" onchange="window.open(this.value,'pdf','')">
<option selected value="-">■ メーカーを選択してください。</option> 
<option value="-">------------------------</option> 
<option value="/sampleAA.php">□ AA</option>
<option value="/sampleBB.php">□ BB</option>
<option value="/sampleCC.php">□ CC</option>
<option>------------------------</option> 
</select>
</form>

調べてみたのですが、ドロップダウンメニュー、メガメニュー、モーダルウィンドウなど…
色々見すぎて何かピンとくるものが無く、止まっています。

wordpressを使っていますが、
レスポンシブデザイン的にもお勧めの方法はありますでしょうか？
ご相談になり、申し訳ありません。

---

【07/27追記】
html/javascriptを少し変更致しました。
下記コードであればポップアップでは開かないとは思うのですが、
別タブ（target="_blank"のイメージ）で開くにはどのようにすれば良いでしょうか？

少し内容変更になっているかもしれませんが、関連しているかと思い、
追記という形にさせて頂きました。

<script>
function screenChange(){
    pullSellect = document.lookup_form.linklist.selectedIndex ;
    location.href = document.lookup_form.linklist.options[pullSellect].value ;
}
</script>

<form name="lookup_form">
<select name="linklist" onChange="screenChange()">
<option selected value="-">■ メーカーを選択してください。</option> 
<option value="-">------------------------</option> 
<option value="/sampleAA.php">□ AA</option>
<option value="/sampleBB.php">□ BB</option>
<option value="/sampleCC.php">□ CC</option>
<option>------------------------</option> 
</select>
</form>

Answer 1

tab等はどうでしょうか？
選択肢が4個くらいまでならスマートフォンでも見やすいかと思います。
それ以上になると厳しいですが

Comments

[orange_drop]

早速お返事頂きまして、ありがとうございます。

記載が抜けていて申し訳ありません。
価格表が多いやつだと、50ほどあるんです…。
そうなると、tabは難しいですよね。少ないとかなり、スッキリ見えそうだったんですけど。

[yoshinavi]

ドロップダウン等1つの商品に50の表示でしょうか？
ユーザーの流れとしてはあまり選択肢が多すぎても良くないと思いますので、価格の前にもう一つ価格帯tab等の選択肢があれば良いのではないでしょうか。

Answer 2

「ポップアップ形式」というのは、window.open()を使った別タブ表示という意味でしょうか?

メニューの種類と、ページの開き方とは、別の問題のように思います。

メニューの種類で言えば、現状のセレクトボックスや、ドロップダウンメニューはレスポンシブデザインとも相性が良いですね。逆にメガメニューやモーダルウィンドウは、画面が大きいときでないと厳しい場合が多いかもしれません。

Comments

[orange_drop]

お返事ありがとうございます。そうです。
<select name="linklist" onchange="window.open(this.value,'pdf','')">の「window.open(this.value,'pdf','')」が気になっている部分になります。

この方法だとスマートフォンで使う場合にはポップアップ形式自体を既定のまま禁止にしている人もいますし、もっと良い方法を探しています。
分かりにくい説明で、申し訳ありません。