前回書いたマルチファーストドロップダウンボックスを使用したとき、多くの問題が発見されました。変更と改善の後、それは今ではうまく使用され、良い携帯性を備えています。以下はソースコードです。
JS
コードコピーは次のとおりです。
（関数（）{
$ .fn.extend（{
checks_select：function（options）{
jq_checks_select = null;
$（this）.val（ "---選択---"）;
$（this）.next（）。empty（）; //最初にクリアします
$（this）.unbind（ "click"）;
$（this）.click（function（e）{
jq_check = $（this）;
//jq_check.attr("class "、" "）;
if（jq_checks_select == null）{
JQ_CHECKS_SELECT = JQ_CHECK.NEXT（）;
jq_checks_select.addclass（ "checks_div_select"）;
// jq_checks_select = $（ "<div class = 'checks_div_select'> </div>"）。insertafter（jq_check）;
$ .each（options、function（i、n）{
check_div = $（ "<div> <入力タイプ= 'チェックボックス'値= '" + n + "'>" + n + "</div>"）。
check_box = check_div.children（）;
check_box.click（function（e）{
//jq_check.attr("value "、palue (this).attr(" value "）））;
temp = "";
$（this）.parents（）。find（ "input：checked"）。各（function（i）{
if（i == 0）{
temp = $（this）.val（）;
}それ以外{
temp+= "、"+$（this）.val（）;
}
}）;
// alert（temp）;
jq_check.val（temp）;
e.StopPropagation（）;
}）;
}）;
jq_checks_select.show（）;
}それ以外{
jq_checks_select.toggle（）;
}
e.StopPropagation（）;
}）;
$（document）.click（function（）{
flag = $（ "＃test_div"）;
if（flag.val（）== ""）{
flag.val（ "---選択----"）;
}
jq_checks_select.hide（）;
}）;
// $（this）.blur（function（）{
//jq_checks_select.css("visibility"、 "hidden"）;
// alert（）;
//}）;
}
}）
}）（jQuery）;
HTML
コードコピーは次のとおりです。
<html>
<head>
<script type = "text/javascript" src = "js/jquery.js">
</script>
<script type = "text/javascript" src = "js/jquery_mutili.js">
</script>
<スクリプト言語= "javascript">
$（document）.ready（function（）{
var options = {
1：「最初の選択」、
2：「セカンドオプション」、
3：「3番目のオプション」、
4：「4番目のオプション」、
5：「5番目のオプション」、
6：「6番目のオプション」
};
$（ "＃test_div"）。checks_select（options）;
}）;
</script>
<style>
.checks_div_select {
幅：150px;
バックグラウンドカラー：＃e9fbfb;
国境：1pxソリッド＃18CBCD;
font-family： 'Verdana'、 'Song-Style';
フォントサイズ：12px;
位置：絶対;
左：2px;
トップ：25px;
}
</style>
</head>
<body>
<div style = "position：relative;">
<入力型= "text" id = "test_div" readonly = "readonly"/>
<div> </div>
</div>
</body>
</html>