効果を見てみましょう：
効果
- クリックしてボックスをポップアップします
- チェックボックスをクリックすると、選択したオプションが選択されたDivに表示されます。
- もう一度クリックしてステータスを外すと、選択したDivに表示される選択したオプションが表示をキャンセルします
- 選択したDivのオプションxアイコンをクリックして、オプションの表示をキャンセルし、対応するチェックボックスをキャンセルしてステータスを選択します
- 主要なカテゴリをクリックすると、サブカテゴリが選択されていません。サブカテゴリをクリックして、主要なカテゴリを選択して状態を解除することを選択します
- 最大3つのオプションを選択できます
- Xアイコンをクリックして、ポップアップボックスを閉じます
- [OK]ボタンをクリックして、選択した結果を表示します
コードブロック
HTMLスニペットコード
<div> <label>部門カテゴリ：< /label> <div> <input type = "hidden" name = "cg_str" id = "cg_str" @if（input :: has（ 'cg_str'））value = "{input :: get（ 'cg_str'）}}}}}" @endif />> <input = "text" "typing" "typing" "typing" "onclop（ @if（input :: has（ 'type'））value = "{{input :: get（ 'type'）}}}" @endif/> </div> </div> <！ - department start-> <div id = "closepopwindow" style = "display：none;"> <div> </div> <ul id = "tagchange"> < href = "javascript：void（0）;">臨床医学</a> </li> <li> <a href = "javascript：void（0）;">補助部門</a> </li> <li> <a href = "javascript：void（0）; onclick = "$（ '＃closepopwindow'）。fadeout（）"> </a> </li> </ul> <div> </div> </div> <div> < @foreach（$ olcyx1 as $ key => $ val）<div> <入力タイプ= "チェックボックス" value = "{{$ val-> id}}" parent = "{{$ val-> parent_id}}"/> <label> {{$ val-> name}}}}}}} </div < <！ - surgery-s-> <div> <入力タイプ= "チェックボックス"値= "5"親= "1"/> <ラベル>手術</label> <div> div> div> div> @foreach（$ olcyx2 as $ key => $ val）<div> <input type = "チェックボックス" value = "{$ val-> {$ vid}" parent = "{$ val-> <label> {{$ val-> name}} </label> <div> </div> </div> @endforeach <div> </div> <！ - > <！ - others-> <div> <input Type = "Checkbox" value = "6" parent = "1"/> <label>その他<div> <入力タイプ= "チェックボックス" value = "{{$ val-> id}}" dive = "{{$ val-> parent_id}}"/> <label> {{$ val-> name}} </label> <div> </div> </div> @endforeach <div> <補助部門-S-> <div> <div> <div> </div> </div> @foreach（$ ofzks as $ key => $ val）<div> <入力タイプ= "チェックボックス" value = "{$ val-> id}}" {{$ val-> parent_id}}} " </div> @endforeach <div> </div> </div> <！ - auxiliary department-e-> <！ - Pharmaceutical Company-S-> <div> <div> <div> <div> </div> </div> @foreach（$ oyygs as $ key => $ val）<入力タイプ= "親= "{{$ val-> parent_id}}"/> <label> {{$ val-> name}} </label> <div> </div> </div> @endforeach <div> </div> </div> < </div> <div> div> </div> </div> <div> </div> </div> <div> <input type = "button" value = "ok" onclick = "checkreturn（）;"/> </div> </div> <！ - メッセージが選択された後に表示される場所-e- e- e-div <タイプエンド - >JSスニペットコード
<Script> //初期のグローバル変数Var num = 1; // Department Category optional number var cg_str = ''; // Department Category ID String var Type = ''; // Department Category name string // refness and Keep selected $（）{var str = $（ "＃cg_str"）。 $（ "＃type"）。val（）+'+'; str.split（ "/"）; $（ "Checked"、true）; onclick = "removeSelector（ ' + val +'）;"> </a> '</div>'（ " //部門カテゴリを開くオプションボックス関数idnumber（prefix）{var idnum = prefix; return idnum;} function show_hidden（controlmenu、num、prefix）{controlmenu.eq（num）.siblings（）。find（ 'a'）。removeclass（ "sele"）; controlmenu.eq（num）.find（ 'a'）。addclass（ "sele"）; var content = prefix + num; $（ '＃'+content）.show（）; $（ '＃'+content）.siblings（）。hide（）;} function getWindowPop（）{$（ "ul＃tagchange li"）。find（ "a"）。 $（ "ul＃tagchange li：first-child a"）。addclass（ "sele"）; $（ "div.pop_sele_cont_box"）。find（ "div.pop_sele：first-child"） $（ "div.pop_sele_cont_box"）。 $（ "div.pop_sele_cont_box div.pop_sele"）。 $（ '＃closepopwindow'）。show（）;} $（ "ul＃tagchange li：not（：last-child）"）。click（function（）{var c = $（ "ul＃tagchange li"）; var index = c.index（this）; if（index <3）{var p = idnumber（ "） $（ "div.pop_sele"）。find（ "div"）。find（ "input [type = 'checkbox']"） if（$（this）.is（ "：checked"））{// process //プロセスサイズクラスオプション$（ "div.pop_sele"）。find（ "div"）。 $（this）.attr（ "checked"、false）; = $（ "div.department_block"）。find（ "div.left"）。 num-- $（ '＃msg'）; + ' +'; $（div.right_block "） $（ "div.department_block"）。find（ "div.left"）。 num--; var labelval = $（obj）.parent（）。parent（）。find（ "div.left"）。html（）。trim（）; $（ "div.department_block"）。eq（index）.remove（）; //選択したオプションを削除する//チェックボックスはunチェックされていない$（ "div.pop_sele"）に設定されています（ "div.pop_sele"）。find（ "input [type = 'checkbox']：checked"）。各（function（this）.val（$（）== val）{$（this）.attr（ "checked"、false）;}}）; //部門のカテゴリ値を変更しますCG_STR = CG_STR.REPLACE（val + '/'、 ""）; type = type.replace（labelval + ' +'、 ""）; num-;} //部門カテゴリを閉じますオプションボックス関数checkreturn（）{//値をテキストボックスに入れますvar cg_ids = cg_str.substring（0、cg_str.length-1）; var type_str = type.substring（0、type.length-1）; $（ "＃cg_str"）。val（cg_ids）; $（ "＃type"）。val（type_str）; $（ '＃closepopwindow'）。fadeout（）;} </script>上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。