teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

2021/01/22 00:49

投稿

aobuta
aobuta

スコア2

title CHANGED
File without changes
body CHANGED
@@ -3,13 +3,12 @@
3
3
  ①ボタンをクリック
4
4
  ②リストを展開
5
5
  ③リストのクリックしたものを表示
6
- と言うようなシステムを制作したいです
6
+ と言うようなシステムを制作したいです.
7
- (追記)[参考サイト](https://mseeeen.msen.jp/bootstrap-4-dropdown-list/)の情報を参考にし
7
+ [参考サイト](https://mseeeen.msen.jp/bootstrap-4-dropdown-list/)のようコードを書きまたが
8
- ![イメージ説明](47734709de9b17afffefa848c0da5c39.jpeg)
9
- ![イメージ説明](b16203a775d552818c489385c9ec6214.jpeg)
10
- このようにコードを書き直しましたが
11
- ![イメージ説明](48f807a6471645bd642e74e9d0c60285.jpeg)このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか?
12
8
 
9
+ ![イメージ説明](48f807a6471645bd642e74e9d0c60285.jpeg)
10
+ このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか?
11
+
13
12
  ### 該当のソースコード
14
13
  <HTML>
15
14
  <div class="dropdown">

5

説明の追加

2021/01/22 00:49

投稿

aobuta
aobuta

スコア2

title CHANGED
File without changes
body CHANGED
@@ -11,14 +11,21 @@
11
11
  ![イメージ説明](48f807a6471645bd642e74e9d0c60285.jpeg)このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか?
12
12
 
13
13
  ### 該当のソースコード
14
+ <HTML>
14
- <div class="dropdown">
15
+ <div class="dropdown">
15
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select your region</button>
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="Chicago" name="Chicago">Chicago</button></li>
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
- ![イメージ説明](b6c41b16570dd691ab7a046ea2400c81.png)
29
+ visibleItem.text($(this).attr("value"));
23
- ![イメージ説明](ead8a9455dcfde1827ede20af2227a03.png)
30
+ sessionStorage.setItem("time", $(this).attr("value"));
24
- ![イメージ説明](b42483aae3b56b6c6af9a12b5b16a354.png)
31
+ }

4

説明の追加

2021/01/22 00:34

投稿

aobuta
aobuta

スコア2

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

説明の追加

2021/01/22 00:32

投稿

aobuta
aobuta

スコア2

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
+ ![イメージ説明](47734709de9b17afffefa848c0da5c39.jpeg)
9
+ ![イメージ説明](b16203a775d552818c489385c9ec6214.jpeg)
10
+ このようにコードを書き直しましたが
11
+ ![イメージ説明](48f807a6471645bd642e74e9d0c60285.jpeg)このようにリストを表示した後クリックしても参考サイトのように「項目を選択して下さい」のところに選択した項目が表示されると言う挙動をシステムを作ることができませんどうすれば良いでしょうか?
7
12
 
8
13
  ### 該当のソースコード
9
14
  <div class="dropdown">

2

写真の添付。説明の追加

2021/01/22 00:30

投稿

aobuta
aobuta

スコア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
+ ![イメージ説明](b6c41b16570dd691ab7a046ea2400c81.png)
12
- ![イメージ説明](66aba795173ffde597560537fb1e80b9.png)
18
+ ![イメージ説明](ead8a9455dcfde1827ede20af2227a03.png)
19
+ ![イメージ説明](b42483aae3b56b6c6af9a12b5b16a354.png)

1

写真を添付しました

2021/01/21 13:43

投稿

aobuta
aobuta

スコア2

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
+ ![イメージ説明](66aba795173ffde597560537fb1e80b9.png)