加载页面时将值发布到相关下拉菜单
Posted
技术标签:
【中文标题】加载页面时将值发布到相关下拉菜单【英文标题】：post value to dependent dropdown menu when page is loaded 【发布时间】：2016-05-01 20:12:53 【问题描述】：在搜索了这个网站后，找到了一种使用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 版本中已弃用
【问题讨论】：
【参考方案1】：您可以手动触发change 事件，这应该会导致您的AJAX 请求被发送。
if ($('select.parent1').val())
$('select.parent1').trigger('change');
【讨论】：
不幸的是，它没有用。或者，也许我将代码添加到了错误的地方？我在 '$(".child1").select2();' 之后添加了您的代码行 您需要在设置更改侦听器后立即输入此行。 完美运行。谢谢！以上是关于加载页面时将值发布到相关下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章