質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Knockout.js

KnockoutJSは、Model-ViewView-Model(MVVM)を用いたダイナミックなHTML ULのためのオープンソースのJavaScriptライブラリです。

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

780閲覧

セレクトチェックリストを作りたいが...

kuuhaku4262

総合スコア39

Knockout.js

KnockoutJSは、Model-ViewView-Model(MVVM)を用いたダイナミックなHTML ULのためのオープンソースのJavaScriptライブラリです。

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/24 05:18

編集2020/11/24 06:18

前提・実現したいこと

チェックボックスが内蔵されていて、複数選択できるセレクトボックスを作りたいです。
なので、下記のコードをそれぞれのファイルに追加したのですがエラーが出てしまいその原因もわかりません。

フレームワーク
PHP: CakePHP
Javascript: knockout.js
CSS: PostCSS

CMSは使ってません。

発生している問題・エラーメッセージ

202011-002:12 GET http://localhost/car-maintenance/js/multiple.select.js net::ERR_ABORTED 404 (Not Found) jquery.min.js?1573618189:2 Uncaught TypeError: $(...).multipleSelect is not a function at new estimationdocumentsModel (index.js?1606191721:1157) at HTMLDocument.<anonymous> (index.js?1606191721:1186) at l (jquery.min.js?1573618189:2) at c (jquery.min.js?1573618189:2)

該当のソースコード

html

1<?php 2echo $this->Html->script('multiple.select.js',[ 'inline' => false ]); 3?> 4<select multiple="multiple" id="shiritori" style="width:200px;"> 5 <option value="1">リンゴ</option> 6 <option value="2">ゴリラ</option> 7 <option value="3">ラズベリーパイ</option> 8 <option value="4">インストローラ―</option> 9 <option value="5">ラズベリーパイZero</option> 10 <option value="6">ログイン</option> 11</select>

javascript

1$("#shiritori").multipleSelect({ 2 onCheckAll: function(view) { 3 $("[id^=shiritori]").removeAttr('disabled'); 4 }, 5 onUncheckAll: function(view) { 6 $("[id^=shiritori]").attr('disabled', 'disabled'); 7 }, 8 onClick: function(view) { 9 if($("#shiritori").multipleSelect('getSelects').length > 0) { 10 $("[id^=shiritori]").removeAttr('disabled'); 11 } else { 12 if($("#shiritori").multipleSelect('getSelects').length == 0) { 13 $("[id^=shiritori]").attr('disabled', 'disabled'); 14 } 15 } 16 }, 17 placeholder: '-', 18 selectAll: true, 19 width: 300 20}); 21if($("#shiritori").multipleSelect('getSelects').length > 0) { 22 $("[id^=shiritori]").removeAttr('disabled'); 23} else { 24 if($("#shiritori").multipleSelect('getSelects').length == 0) { 25 $("[id^=shiritori]").attr('disabled', 'disabled'); 26 } 27}

css

1.multiselect { 2 width: 200px; 3 } 4 5 .selectBox { 6 position: relative; 7 } 8 9 .selectBox select { 10 width: 100%; 11 font-weight: bold; 12 } 13 14 .overSelect { 15 position: absolute; 16 left: 0; 17 right: 0; 18 top: 0; 19 bottom: 0; 20 } 21 22 #checkboxes { 23 display: none; 24 border: 1px #dadada solid; 25 } 26 27 #checkboxes label { 28 display: block; 29 } 30 31 #checkboxes label:hover { 32 background-color: #1e90ff; 33 } 34 35 #ms{width:200px;} 36 37 .ms-parent { 38 display: inline-block; 39 position: relative; 40 vertical-align: middle; 41 } 42 43 .ms-choice { 44 display: block; 45 width: 70%; 46 height: 26px; 47 padding: 0; 48 overflow: hidden; 49 cursor: pointer; 50 border: 1px solid #aaa; 51 text-align: left; 52 white-space: nowrap; 53 line-height: 26px; 54 color: #444; 55 text-decoration: none; 56 background-color: #fff; 57 58 } 59 60 .ms-choice.disabled { 61 background-color: #f4f4f4; 62 background-image: none; 63 border: 1px solid #ddd; 64 cursor: default; 65 } 66 67 .ms-choice > span { 68 position: absolute; 69 top: 0; 70 left: 0; 71 right: 20px; 72 white-space: nowrap; 73 overflow: hidden; 74 text-overflow: ellipsis; 75 display: block; 76 padding-left: 8px; 77 } 78 79 .ms-choice > span.placeholder { 80 color: #999; 81 } 82 83 .ms-choice > div { 84 position: absolute; 85 top: 0; 86 right: 0; 87 width: 20px; 88 height: 25px; 89 } 90 91 92 .ms-drop { 93 overflow: hidden; 94 display: none; 95 margin-top: -1px; 96 padding: 0; 97 position: absolute; 98 z-index: 1000; 99 background: #fff; 100 color: #000; 101 border: 1px solid #aaa; 102 } 103 104 .ms-drop.bottom { 105 top: 100%; 106 } 107 108 .ms-drop.top { 109 bottom: 100%; 110 } 111 112 .ms-search { 113 display: inline-block; 114 margin: 0; 115 min-height: 26px; 116 padding: 4px; 117 position: relative; 118 white-space: nowrap; 119 width: 100%; 120 z-index: 10000; 121 } 122 123 .ms-search input { 124 width: 100%; 125 height: auto !important; 126 min-height: 24px; 127 padding: 0 20px 0 5px; 128 margin: 0; 129 outline: 0; 130 font-family: sans-serif; 131 font-size: 1em; 132 border: 1px solid #aaa; 133 border-radius: 0; 134 } 135 136 .ms-search, .ms-search input { 137 -webkit-box-sizing: border-box; 138 -khtml-box-sizing: border-box; 139 -moz-box-sizing: border-box; 140 -ms-box-sizing: border-box; 141 box-sizing: border-box; 142 } 143 144 .ms-drop ul { 145 overflow: auto; 146 margin: 0; 147 padding: 5px 8px; 148 } 149 150 .ms-drop ul > li { 151 list-style: none; 152 display: list-item; 153 background-image: none; 154 position: static; 155 } 156 157 .ms-drop ul > li .disabled { 158 opacity: .35; 159 filter: Alpha(Opacity=35); 160 } 161 162 .ms-drop ul > li.multiple { 163 display: block; 164 float: left; 165 } 166 167 .ms-drop ul > li.group { 168 clear: both; 169 } 170 171 .ms-drop ul > li.multiple label { 172 width: 100%; 173 display: block; 174 white-space: nowrap; 175 overflow: hidden; 176 text-overflow: ellipsis; 177 } 178 179 .ms-drop ul > li label.optgroup { 180 font-weight: bold; 181 } 182 183 .ms-drop input[type="checkbox"] { 184 vertical-align: middle; 185 } 186 187 .ms-drop .ms-no-results { 188 display: none; 189 } 190 191 .shiritori { 192 border: 1px solid #ddd; 193 }

補足情報(FW/ツールのバージョンなど)

足りない情報などありましたら、コメントにお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/11/24 05:31

そもそも何がやりたいかが伝わってきません multipleなselectはすでに提示されているので、これをどうしたいのかがわかりません
kuuhaku4262

2020/11/24 05:44

ブラウザで検索したろころ、「JsController could not be found.」と表示されたのでおそらく取得できていないと思われます。
kuuhaku4262

2020/11/24 05:44

エラーが出てしまい、表示できないのでその原因を知りたいということです。
m.ts10806

2020/11/24 06:08

>echo $this->Html->script 何かしらフレームワーク、CMSをお使いでしたらタグに追加、質問本文に追記願います。 このタグではそもそもPHPコードが出てきていることに違和感があります。質問内容に合わせてください
kuuhaku4262

2020/11/24 06:19 編集

ご指摘ありがとうございます。 本文とタグを修正致しました。
moromon

2020/11/24 08:33

jqueryを読み込んでいるソースコードと実際のファイル構造の情報の追加をお願いできますか?
nojimage

2020/11/24 11:37

単純に指定パスに multiple.select.js が存在しないだけに見えます。 webroot/js/multiple.select.js にファイルは存在しますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問