質問編集履歴
6
title
CHANGED
File without changes
|
body
CHANGED
@@ -3,13 +3,12 @@
|
|
3
3
|
①ボタンをクリック
|
4
4
|
②リストを展開
|
5
5
|
③リストのクリックしたものを表示
|
6
|
-
と言うようなシステムを制作したいです
|
6
|
+
と言うようなシステムを制作したいです.
|
7
|
-
|
7
|
+
[参考サイト](https://mseeeen.msen.jp/bootstrap-4-dropdown-list/)のようにコードを書きましたが
|
8
|
-

|
9
|
-

|
10
|
-
このようにコードを書き直しましたが
|
11
|
-
このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか?
|
12
8
|
|
9
|
+

|
10
|
+
このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか?
|
11
|
+
|
13
12
|
### 該当のソースコード
|
14
13
|
<HTML>
|
15
14
|
<div class="dropdown">
|
5
説明の追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -11,14 +11,21 @@
|
|
11
11
|
このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか?
|
12
12
|
|
13
13
|
### 該当のソースコード
|
14
|
+
<HTML>
|
14
|
-
|
15
|
+
<div class="dropdown">
|
15
|
-
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
16
|
+
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">項目を選択してください</button>
|
16
17
|
<ul class="dropdown-menu">
|
17
|
-
<li><button class="dropdown-item" value="Los Angeles" name="Los Angeles">Los Angeles</button></li>
|
18
|
-
<li><button class="dropdown-item" value="San Francisco" name="San Francisco">San Francisco</button></li>
|
19
|
-
<li><button class="dropdown-item" value="San Diego" name="San Diego">San Diego</button></li>
|
20
|
-
<li><button class="dropdown-item" value="New York" name="New York">New York</button></li>
|
21
|
-
<li><button class="dropdown-item" value="
|
18
|
+
<li><button class="dropdown-item" value="項目1">項目1</button></li>
|
19
|
+
<li><button class="dropdown-item" value="項目2">項目2</button></li>
|
20
|
+
<li><button class="dropdown-item" value="項目3">項目3</button></li>
|
21
|
+
</ul>
|
22
|
+
</div>
|
23
|
+
|
24
|
+
JavaScript
|
25
|
+
|
26
|
+
$(function(){
|
27
|
+
$(".dropdown-menu .dropdown-item").click(function(){
|
28
|
+
var visibleItem = $(".dropdown-toggle", $(this).closest(".dropdown"));
|
22
|
-
|
29
|
+
visibleItem.text($(this).attr("value"));
|
23
|
-
|
30
|
+
sessionStorage.setItem("time", $(this).attr("value"));
|
24
|
-
|
31
|
+
}
|
4
説明の追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
buttonタグを使ったプルダウンを作りたいです。ベースはHTMLで作ったのですがこれにどうゆうCSSを使えばbuttonタグを使ったプルダウンが作れるのでしょうか?
|
1
|
+
buttonタグを使ったプルダウンを作りたいです。ベースはHTMLで作ったのですがこれにどうゆうCSSもしくはjavascriptを使えばbuttonタグを使ったプルダウンが作れるのでしょうか?
|
2
2
|
写真の上から順番に
|
3
3
|
①ボタンをクリック
|
4
4
|
②リストを展開
|
3
説明の追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -4,6 +4,11 @@
|
|
4
4
|
②リストを展開
|
5
5
|
③リストのクリックしたものを表示
|
6
6
|
と言うようなシステムを制作したいです
|
7
|
+
(追記)[参考サイト](https://mseeeen.msen.jp/bootstrap-4-dropdown-list/)の情報を参考にして
|
8
|
+

|
9
|
+

|
10
|
+
このようにコードを書き直しましたが
|
11
|
+
このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか?
|
7
12
|
|
8
13
|
### 該当のソースコード
|
9
14
|
<div class="dropdown">
|
2
写真の添付。説明の追加
title
CHANGED
File without changes
|
body
CHANGED
@@ -1,4 +1,9 @@
|
|
1
1
|
buttonタグを使ったプルダウンを作りたいです。ベースはHTMLで作ったのですがこれにどうゆうCSSを使えばbuttonタグを使ったプルダウンが作れるのでしょうか?
|
2
|
+
写真の上から順番に
|
3
|
+
①ボタンをクリック
|
4
|
+
②リストを展開
|
5
|
+
③リストのクリックしたものを表示
|
6
|
+
と言うようなシステムを制作したいです
|
2
7
|
|
3
8
|
### 該当のソースコード
|
4
9
|
<div class="dropdown">
|
@@ -9,4 +14,6 @@
|
|
9
14
|
<li><button class="dropdown-item" value="San Diego" name="San Diego">San Diego</button></li>
|
10
15
|
<li><button class="dropdown-item" value="New York" name="New York">New York</button></li>
|
11
16
|
<li><button class="dropdown-item" value="Chicago" name="Chicago">Chicago</button></li>
|
17
|
+

|
12
|
-

|
19
|
+

|
1
写真を添付しました
title
CHANGED
File without changes
|
body
CHANGED
@@ -8,4 +8,5 @@
|
|
8
8
|
<li><button class="dropdown-item" value="San Francisco" name="San Francisco">San Francisco</button></li>
|
9
9
|
<li><button class="dropdown-item" value="San Diego" name="San Diego">San Diego</button></li>
|
10
10
|
<li><button class="dropdown-item" value="New York" name="New York">New York</button></li>
|
11
|
-
<li><button class="dropdown-item" value="Chicago" name="Chicago">Chicago</button></li>
|
11
|
+
<li><button class="dropdown-item" value="Chicago" name="Chicago">Chicago</button></li>
|
12
|
+

|