セレクトボックスのどの選択をしたかによってalertする文字を変えたいです。

<script>
         function btnCtr(){
         var num = a;
         if ( num == 1){
         alert("wasd");
         }else if (num == 2){
            alert("ah");
         }else{
            alert("AA");
         }
         }
    </script>
</head>
<body>
    <select num="a" id="food">
  <option value="1">かつ</option>
  <option value="2">すし</option>
  <option value="3">うこん</option>
</select>
<button
onClick="btnCtr()">行う
</button>
</body>

初歩的な質問申し訳ありません。
セレクトボックスのどの選択をしたかによってalertする文字を変えたいのですが、
どのようにすれば良いかわかりません。
選んだ選択を1，2，3として1を選んだら"wasd"、2を選んだら"ah"、のように表示させたいです。
また、どうしたら　var num = a; と　<select num="a" id="food"> のaをコネクトできるようになりますか？

m.ts10806

2022/01/27 05:19

「num」という属性はHTMLにはないはずですが（「name」はある）、Monacaの仕様でしょうか。

m.ts10806

2022/01/27 05:21

また、ID振られているならIDで取得したほうがいいのでは。「JavaScript セレクトボックス選択値取得」のようなキーワードで出てくるように思うのですが、現状で提示されているコードの問題点は何でしょうか。

行動規範の内容に同意します

回答2件

なんとなく「セレクトボックスで選択されている値を JS で取り出す」あたりが分からないのかなという気がしました。

id="food" が指定されている要素は document.getElementById() で取れます。

js
1let elem = document.getElementById("food");

選択されている値は selectedValue で取れるかな...？検索してみてください。

select 要素に付いてる num = "a" は何でしょう。

もし select を js から参照する方法が分からなくてとりあえず書いてみた、とかだったら要らないです。
（id があれば参照できる）

それとも私が知らない何かでしょうか。
data-num="a" とかだったら分かりますが。

また、どうしたら　var num = a; と　<select num="a" id="food"> のaをコネクトできるようになりますか？

ここはちょっと分からなかったです。
Angular でいうところのバインドとかがしたいのかな？と一瞬思いましたが...

js 側で select を参照したいということであれば前述通りです。
もし js でカスタム属性の値を書き換えたい、とかであれば setAttribute() とかでしょうか。

投稿2022/01/27 07:07

sk_3122

総合スコア1126

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const list={"1":"wasd","2":"ah"};
4  btn.addEventListener('click',()=>{
5    const v=food.value;
6    const ret=list[v]??"AA";
7    console.log(ret);
8  });
9});
10</script>
11<select num="a" id="food">
12  <option value="1">かつ</option>
13  <option value="2">すし</option>
14  <option value="3">うこん</option>
15</select>
16<button id="btn">行う</button>