monaca ons-selectにoptionを追加したい

monacaにてons-selectにボタンのクリックでoptionを追加していきたいです。

以下のコードを実行すると、ons-selectの下部に追加され、ons-select内部に
追加されません。

onsen uiのサンプル通りだと思うのですが。
###https://ja.onsen.io/v2/api/js/ons-select.html#tutorial

HTML
1  <div style="padding: 10px 20px 10px 25px;">
2    <ons-select id="opt" size="3">
3        <option value="111">111</option>
4    </ons-select>
5  </div>
6
7  <ons-button disabled="true" onclick="btn_clk(event)">追加</ons-button>
8

JS
1//追加
2function btn_clk(event) {
3  const option = document.createElement('option');
4  option.innerText = "333";
5  document.getElementById('opt').appendChild(option);
6}

ボタンをクリックする度に、333が追加されていくのが、やりたい事です。

よろしくお願いいたします。

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

回答3件

ベストアンサー

ons-select 分の回答を以下に記載します。動作確認をお願いします。

HTML
1<body>
2  <ons-select id="opt">
3    <option value="111">111</option>
4  </ons-select>
5
6  <ons-button onclick="btn_click()">追加</ons-button>
7
8  <script>
9      function btn_click()
10      {
11        var option = document.createElement('option');
12        option.setAttribute("value", "333")
13        option.innerHTML = "333";
14        
15        document.querySelector(".select-input").appendChild(option);
16      }
17  </script>
18</body>

暗黙的ですが ons-select タグを利用すると内部に <select class="select-input"> というタグが生成されます。console.log() などで id:opt の要素を確認してみると分かりやすいでしょう。

今回の例は画面中に一つしか存在しないため document.querySelector で取得しました。

取得後の処理は JavaScript の前回の回答と、指定方法が変わっただけで、ほぼ同じです。

// Onsen-UI 的に問題を解決したかったのですが参考になる資料が見つかりませんでした。
// より良い回答は有識者に期待したいところ。

投稿2017/10/10 05:49

Yosuke-Kawakami

総合スコア161

a1-1969

2017/10/12 00:55

ご回答ありがとうございました。 ons-selectに追加できました。 //しかし、Onsen-UIの情報が少ないですね。 //MONACAの有償ユーザになると、簡単に解決できたのでしょうか。ありがとうございました。

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

私も同様の困りごとに遭遇しまして、本QAに辿り着きました。
おかげさまで解決できました。質問者さま＆回答者さま、ありがとうございました。

私はこんな↓感じで対応しました。
ons-selectのselect-idという属性を使うと、ons-selectの子要素として暗黙的に生成されるselectタグにid属性を付与できるようで、document.getElementById('opt')で指定ができました。
https://ja.onsen.io/v2/api/js/ons-select.html
（質問に貼ってあるコードからの変更は、このselect-id属性と、ons-buttonのdisabledのところだけです）

HTML
1  <div style="padding: 10px 20px 10px 25px;">
2    <ons-select select-id="opt" size="3">
3        <option value="111">111</option>
4    </ons-select>
5  </div>
6
7  <ons-button onclick="btn_clk(event)">追加</ons-button>

JS
1function btn_clk(event) {
2  const option = document.createElement('option');
3  option.innerText = "333";
4  document.getElementById('opt').appendChild(option);
5}

投稿2023/01/17 16:12

yamauchih

総合スコア2

ひとつめ、ons-button のパラメータ disabled を削除しましょう。ボタンが利かない理由はそれです。（disabled="false" などとしても駄目）

ふたつめ、ボタンクリック時の処理は下記を確認してください。コピペして動かしてみましょう。

html
1<body>
2  <select id="opt">
3    <option value="111">111</option>
4  </select>
5
6  <ons-button onclick="btn_click()">追加</ons-button>
7
8  <script>
9      function btn_click(event)
10      {
11        var option = document.createElement('option');
12        option.setAttribute("value", "333")
13        option.innerHTML = "333";
14        
15        document.getElementById('opt').appendChild(option);
16      }
17  </script>
18</body>

投稿2017/10/05 05:17

Yosuke-Kawakami

総合スコア161

a1-1969

2017/10/06 01:12

ご回答いただきまして、ありがとうございます。ひとつめの「disabled」は投稿時の誤記でした。失礼いたしました。ひたつめですが、単純な「select」の場合は、追加出来るのですが、 OnsenUIの「ons-select」だと「ons-select」の中に追加できず、「ons-select」の下に追加されているような表示になります。よろしくお願いいたします。

Yosuke-Kawakami

2017/10/10 05:34

あらら、ごめんなさい。勘違いして select で回答してしまいました。 ons-select 分の回答を別で投稿します。ご確認ください。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する