0

このサイトを検索した後、ajax を使用して依存ドロップダウン メニューを簡単に作成する方法を見つけました (以前は「kartik 依存ドロップダウン」プラグインを使用していましたが、select2 では機能しないため、カスタム ソリューションが必要でした)。親ドロップダウンから任意のオプションが選択されたときに依存 (子) ドロップダウン メニューを完全に機能させることができますが、ページが読み込まれたときに依存ドロップダウンを表示することはできません (最初に親ドロップダウンでいくつかのオプションをクリックする必要があります)。コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Dependent Select Box</title>
<link href="css/styles.css" rel="stylesheet" />
<script src="ajax/jquery.min.js"></script>
<script src="ajax/plugins/forms/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".parent1").select2();
$(".child1").select2();

$(".parent1").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;

$.ajax
({
type: "POST",
url: "test_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$("select.child1").html(html);
}
});
});
});
</script>
</head>
<body>
<select name="parent1" class="parent1">
<option value="1">something</option>
<option value="2" selected>something good</option>
<option value="3">who cares</option>
</select>
<select name="child1" class="child1">
</select>
</body>
</html>

test_ajax.php ソースは次のとおりです。

    <?php
if (!isset($_POST['id']))
{
    exit();
}
else
{
    echo "<option value=\"".$_POST['id']."\">".$_POST['id']."</option>";
}
?>
<option value="aaa">aaa</option><option value="bbb">bbb</option><option value="ccc">ccc</option>

<option value="2" selected>something good</option>ページがロードされたときに初期値 ( ) が test_ajax.php にポストされるように、コードをどのように変更すればよいですか (ページのロード時に子ドロップダウンが空にならないようにします)。

このページでいくつかの例を見つけましたが、それらはselect2のバージョン3.x用であり、例で使用されている関数はバージョン4.xでは非推奨です

4

1 に答える 1

1

イベントを手動でトリガーするだけchangeで、AJAX リクエストが送信されます。

if ($('select.parent1').val()) {
  $('select.parent1').trigger('change');
}
于 2016-01-28T00:23:24.940 に答える