ラジオボタンで作った値と全く同じものをセレクトボックスで取得したいです。

HTML初心者です。
教えて頂きたい事は、ラジオボタンで作った値と全く同じものをセレクトボックスで作ることができますでしょうか。

        <p>人数</p>
        <div id="form-number" class="btn-group btn-group-toggle w-100" data-toggle="buttons">
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="1" autocomplete="off">1
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="2" autocomplete="off">2
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="3" autocomplete="off">3
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="4" autocomplete="off">4
            </label>
            <label class="btn btn-secondary">
                <input type="radio" name="number" value="5" autocomplete="off">5
            </label>
        </div>

をセレクトボックスで作りたいです。

penguin520

2023/01/24 05:07

「まったく同じもの」というのは、どこからどこまで同じという意味でしょうか？ラジオボタンをプルダウンメニューにしたいということですか？

choco29

2023/01/24 05:12

お返事ありがとうございます。その通りです。ラジオボタンをプルダウンメニューに変更したいと思っています。

m.ts10806

2023/01/24 05:35 編集

selectタグの使い方は調べられましたか？現状だと「できますか」という質問なので「できますが、要件不明瞭なので想定されているものになるかどうかはわからない」という回答になります。質問は編集できますので、赤の他人が読んでわかるように調整してください。

m.ts10806

2023/01/24 05:43

よく見たら＞ラジオボタンで作った値と全く同じものここ、よくわかりません。図示できますか？

choco29

2023/01/24 06:14

例えばですが、ラジオボタンで１人，２人，３人，４人，５人，みたいな項目があって、2人を選んだ時にname="number"に２って値が入りますが、プルダウンメニューでも同じname="number"に値が入るようにしたいです。

m.ts10806

2023/01/24 07:29

質問は編集できますので

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

回答3件

ベストアンサー

フォーム送信されるエントリーが同じようになるという意味であれば、JavaScriptを使ってもよければ同じにすることは可能です。

ラジオボタンは何も選択していない状態があり、そのときはエントリーが送られません。<select> はリストボックス型(sizeが2以上)のときは未選択状態があって、そのときはエントリーが送られません。デフォルトのドロップダウンメニュー型では未選択状態がなく、必ずエントリーが送られます。後者の場合は未選択を表す <option> を作って、それが選ばれていたらデータを削除するような処理を入れるとラジオボタンと互換の挙動になります。

html
1<select name="number" size="1">
2<option value="">選択してください</option>
3<option>1</option>
4<option>2</option>
5<option>3</option>
6<option>4</option>
7</select>
8<script>
9document.querySelector('select[name="number"]').form.
10    addEventLisetner('formdata', e => {
11  if (e.formData.get('number') == '')
12    e.formData.delete('number');
13});
14</script>

投稿2023/01/24 06:04

int32_t

総合スコア20856

choco29

2023/01/24 07:41

ありがとうございます。 JavaScriptを使えばできるんですね。やりたかった事が出来て大満足です。これからJavaScriptも勉強していきたいとおもいます。

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

ラジオボタンもセレクトボックスも排他的な選択をするものですからそのままセレクトボックスではだめなんですか？

HTML
1<p>人数</p>
2<select name="number">
3<option value="">-</option>
4<option value="1">1</option>
5<option value="2">2</option>
6<option value="3">3</option>
7<option value="4">4</option>
8<option value="5">5</option>
9</select>

未選択時の挙動を一致させたいということでしょうか？

投稿2023/01/24 05:50

yambejp

総合スコア114814

HTMLだけで出来ないかなと四苦八苦してみましたが、無理そうでした。

HTML/CSS/javascript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>コードビュー</title>
7    <link href="https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/4-1-3/css/reset.css" rel="stylesheet">
8    <style>
9        div#form-number{display: none;}
10    </style>
11    
12</head>
13
14<body>
15
16    <p>人数</p>
17        <p onclick="menu()">選択してください</p>
18        <div id="form-number" class="btn-group btn-group-toggle w-100" data-toggle="buttons">
19            <label class="btn btn-secondary">
20                <input type="radio" name="number" value="2" autocomplete="off">2
21            </label><br>
22            <label class="btn btn-secondary">
23                <input type="radio" name="number" value="3" autocomplete="off">3
24            </label><br>
25            <label class="btn btn-secondary">
26                <input type="radio" name="number" value="4" autocomplete="off">4
27            </label><br>
28            <label class="btn btn-secondary">
29                <input type="radio" name="number" value="5" autocomplete="off">5
30            </label>
31    </div>
32    
33
34
35
36</body>
37<script type="text/javascript">
38    function menu() { document.getElementById('form-number').style.display = 'block'; }
39</script>
40
41</html>

追記：質問へのコメントを読むと、もしかしてこういう意味ですか？？

HTML
1<label>人数</label>
2        <div id="form-number" class="btn-group btn-group-toggle w-100" >
3            <select name="hoge">
4                <option value="">選択してください</option>
5                <option value="1">1</option>
6                <option value="2">2</option>
7                <option value="3">3</option>
8                <option value="4">4</option>
9                <option value="5">5</option>
10            </select>
11    </div>