PCとスマホでselectboxの値の取り方について

Question

Bootstrapのhidden-xsを使って２つのselectboxを用意しています。

<div class="hidden-xs">
  <div class="col-xs-3 col-xs-offset-11">
    <select id="list-num" onchange="onChangeTable();">
      <option value="10" selected>10件</option>
      <option value="20">20件</option>
      <option value="30">30件</option>
    </select>
    <p></p>
  </div>
</div>
<div class="visible-xs">
  <div class="col-xs-8"></div>
    <div class="col-xs-3">
      <select id="list-num-sp" onchange="onChangeTableSP();">
        <option value="10" selected>10件</option>
        <option value="20">20件</option>
        <option value="30">30件</option>
      </select>
      <p></p>
    </div>
</div>

JS側では以下の方法で値を取得しています。

var list_elm= document.getElementById('list-num');
num= parseInt(list_elm.value);

この方法だとスマホ画面になった時に「list-num-sp」から値を取得することができません。
JS側でスマホ画面かどうかの判断を追加してどちらのselectboxから値を取得するか？とする方法しか対応策はないでしょうか？

Comments

[m.ts10806]

わざわざわける理由が分かりません。

[limitman80]

スマホ用とPC用で表示する場所を微妙に変えてます。

[m.ts10806]

なるほど。ひとつで出来なくはなさそうですがそのように作られてるなら仕方ないですね。ところてスマホ画面用にlist-num-spをgetElementByIdで取得するように書いてるんですよね？提示内容からは読み取れませんでした。

[m.ts10806]

thisを渡せばわざわざそれぞれ関数用意する必要もなさそうです。BootStrapならjQueryで組まれた方がもっと楽に書けますし。

[limitman80]

書いてませんが、document.getElementById('list-num-sp')もあります。

[m.ts10806]

回答者は質問内容からしか状況を知ることができませんので、なるべく全てご提示ください。不要なやり取りが発生します。

Answer 1

Bootstrapを使っているならjQueryが使えるはずなので

var num = parseInt($('[id|="list-num"]:visible').val(), 10);

https://api.jquery.com/category/selectors/