MVNO事業者を選ぶドロップダウンリストを実装！

あとで読むスポンサーリンク

ドロップダウンリストが動かない(;_;)

Bootstrapフレームワークを利用したWebサービス作りを日々頑張っておりますが、なかなかデザイン周りは不得手なので躓くツマヅク(^-^;
ドロップダウンリストを使いたかったのですが、2時間格闘しても動かせず、諦めてグループボタンに逃げた次第ですorz

作っている途中経過も公開しっぱなしになっていますので見ていってください(^-^;

1日目：MVNO価格一覧表 | マネー報道 Webサービス test01
2日目：MVNO価格一覧表 | マネー報道 Webサービス test02
3日目：MVNO価格一覧表 | マネー報道 Webサービス test03

そしたらば、昨日の記事へのブコメにて救い主が現れました！

id:psneさん
→ https://jsfiddle.net/psne/12v03d85/

URLが書かれただけのブコメですが、そのURLに飛んで行ってみると・・・

Bootstrap3のドロップダウン的なやつ - JSFiddle - Code Playground

教えて頂いたURLに行くと、そこにはHTML、JavaScript、CSSの3点セットと動作サンプルが！！！
f:id:MoneyReport:20160418155450j:plain

id:psneさん、どうもありがとうございました(*^▽^*)／
これでドロップダウンリストを実装出来そうです！

ドロップダウンリストの再実装

頂いたコードを早速適用してアップしてみると・・・
f:id:MoneyReport:20160418155611j:plain

動いた～♪

ただ、自分の実装途中のコードに入れると動かない(-_-;

「いや、これはJavaScriptがおかしくなっている、きっと！」

とあたりを付けてコードを見まくると、JSの宣言が複数ありました(^o^;
ちょっと分かりにくいですが、
head内に「jquery/2.0.3/jquery.min.js」と「bootstrap/3.3.4/js/bootstrap.min.js」を宣言していて
body内に「jquery/1.11.3/jquery.min.js」と「bootstrap/3.3.6/js/bootstrap.min.js」を宣言していてダブってしまっています(>_<)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>
<body>
    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>
</html>

これは、デザインをBootstrapを使っているのですが、エディタを２つ使っていて「BootstrapEditor」と「Pingendo」を使っており、この両方のデザインを持ってきてくっつけた弊害かと(-_-;
まぁ、くっつけるときに私がきちんとチェックしてはずさなければいけなかったのですが、気付きませんでした(T_T)

で、body内のJSを両方共削除したら、頂いたコードでドロップダウンリストが動きました！