使用jQuery的Ajax如何使用嵌套查询嵌套、如何使用、jQuery、Ajax
2023-09-10 14:53:35
作者：嚼着口香糖逛世界
我有3个选择框。从第一次的选择选择框，我正在选择第二个选择框。自带轻松使用jQuery阿贾克斯。但经过上更改此第二个选择框是不工作的得到Jquery的ajax的输出，这点我必须把第三选择框。 我有以下三个选择框 1）学院选择框 2）课程类型选择框 3）分公司类型选择框。
从大学选择框，我选择一所大学，然后使用jQuery：AJAX我得到的课程类型选择框课程类型选项。但是，当我从课程类型中选择任何一个选项，那么它不工作。我使用的PHP AJAX。
我的code是如下：
＆LT;脚本＆GT;
$（＃collegename）。改变（函数（）{
。VAR collegeID = $（＃collegename）VAL（）;
$阿贾克斯（{
网址：AJAX / getCollegeBranchDetailsTotal.php
键入：POST，
数据：{ID：collegeID}，
数据类型：JSON，
成功：功能（数据）{
如果（data.success）{
VAR outputHtml ='';
VAR选择开始='＆LT;选择一个id =课程名NAME =课程名＆GT;＆LT;期权价值=＆GT;选择课程＆LT; /选项＆GT;';
VAR SelectEnd ='＆LT; /选择＆GT;';
VAR的选择='';
如果（data.branchData）{
$每个（data.branchData，功能（当然，branchdetails）{
VAR optionParam ='＆LT;期权价值='+ data.courseData [当然] +'＆GT; +课程+'＆LT; /选项＆GT;';
选项=选项+ optionParam;
}）;
}
outputHtml =选择开始+期权+ SelectEnd;
$（courseDiv。）的HTML（outputHtml）。
}
}
}）;
}）;
$（＃课程名）。在（'改变'，函数（）{
。VAR collegeID = $（＃collegename）VAL（）;
$阿贾克斯（{
网址：AJAX / getCollegeBranchDetailsTotal.php
键入：POST，
数据：{ID：collegeID}，
数据类型：JSON，
成功：功能（数据）{
如果（data.success）{
VAR outputHtml ='';
如果（data.branchData）{
VAR选择开始='＆LT;选择一个id =分支名称NAME =分支名称＆GT;＆LT;期权价值=＆GT;选择一个分支＆LT; /选项＆GT;';
VAR SelectEnd ='＆LT; /选择＆GT;';
VAR的选择='';
$每个（data.branchData，功能（当然，branchdetails）{
$每个（branchdetails，功能（ID，姓名）{
VAR optionParam ='＆LT;期权价值=+ ID +'＆GT; +名字+'＆LT; /选项＆GT;';
选项=选项+ optionParam;
}）;
}）;
outputHtml =选择开始+期权+ SelectEnd;
}
$（。branchNames）HTML（outputHtml）;
}
}
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =块＆GT;
＆LT; DIV CLASS =标签＆GT;学院名称：LT; / DIV＆GT;
＆LT; DIV CLASS =collegeDiv＆GT;
＆LT;选择一个id =collegenameNAME =collegename/＆GT;
＆LT;期权价值=''＆GT;选择大学和LT; /选项＆GT;
＆LT; PHP
的foreach（$ collegeNames为$ n =＆GT; $值）{
打印＆LT;期权价值='$ ID'＆gt;中。 $值[名称]。 ＆LT; /选项＆gt;中;
}
？＆GT;
＆LT; /选择＆GT;＆LT; BR /＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =块＆GT;
＆LT; DIV CLASS =标签＆GT;课程名称：＆LT; / DIV＆GT;
＆LT; DIV CLASS =courseDiv＆GT;
＆LT;选择一个id =课程名NAME =课程名/＆GT;
＆LT;期权价值=''＆GT;选择课程＆LT; /选项＆GT;
＆LT; /选择＆GT;＆LT; BR /＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =块＆GT;
＆LT; DIV CLASS =标签＆GT;分行名称：＆LT; / DIV＆GT;
＆LT; DIV CLASS =branchNames＆GT;
＆LT;选择一个id =分支名称NAME =分支名称/＆GT;
＆LT;期权价值=＆GT;选择一个分支＆LT; /选项＆GT;
＆LT; /选择＆GT;＆LT; BR /＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
解决方案
每当INOUT到您的第一选择时，你完全取代了第二个。这将删除不仅老项目也已注册的事件处理程序。
您应该：
在只更换的第二选择选择选项（而不是选择本身）根据变化中的第一个字段或 在执行每次有变化的事件处理程序的注册。方法 - 通过JQuery的活（）支持这一点。 （如果preFER这一点，看看 http://api.jquery.com/live/ ）
I have 3 select Boxes. From the selection of first select Box, i am getting the options for second select Box. That comes easily using the jQuery Ajax. But after this second select box on change is not working for getting the Jquery ajax output, which i have to put in third select box. I have following three select Boxes 1) College select Box 2) Course type select box 3) Branch type select Box.
From college select box, i select a college, then using Jquery:ajax i got course type options for Course type select box. But when i am selecting any one option from Course type then it is not working. I am using Php for ajax.
my code is follows:
<script>
$("#collegename").change(function() {
var collegeID = $("#collegename").val();
$.ajax({
url: "ajax/getCollegeBranchDetailsTotal.php",
type: "POST",
data: {ID : collegeID},
dataType: "json",
success: function(data){
if(data.success){
var outputHtml = '';
var SelectStart = '<select id="coursename" name="coursename"><option value=""> Select a Course </option>';
var SelectEnd = '</select>';
var options = '';
if(data.branchData){
$.each( data.branchData, function( course, branchdetails ) {
var optionParam = '<option value='+ data.courseData[course] +'> ' + course + '</option>';
options = options + optionParam;
});
}
outputHtml = SelectStart + options + SelectEnd;
$(".courseDiv").html(outputHtml);
}
}
});
});
$("#coursename").on('change', function() {
var collegeID = $("#collegename").val();
$.ajax({
url: "ajax/getCollegeBranchDetailsTotal.php",
type: "POST",
data: {ID : collegeID},
dataType: "json",
success: function(data){
if(data.success){
var outputHtml = '';
if(data.branchData){
var SelectStart = '<select id="branchname" name="branchname"><option value=""> Select a Branch </option>';
var SelectEnd = '</select>';
var options = '';
$.each( data.branchData, function( course, branchdetails ) {
$.each( branchdetails, function( id, name ) {
var optionParam = '<option value="'+ id +'"> ' + name + '</option>';
options = options + optionParam;
});
});
outputHtml = SelectStart + options + SelectEnd;
}
$(".branchNames").html(outputHtml);
}
}
});
});
</script>
<body>
<div class="block">
<div class="label">College Name:</div>
<div class="collegeDiv">
<select id="collegename" name="collegename" />
<option value=''> Select a College </option>
<?php
foreach ($collegeNames as $id => $values) {
print "<option value='$id'> " . $values["Name"] . "</option>";
}
?>
</select><br />
</div>
</div>
<div class="block">
<div class="label">Course Name: </div>
<div class="courseDiv">
<select id="coursename" name="coursename" />
<option value=''> Select a Course </option>
</select><br />
</div>
</div>
<div class="block">
<div class="label">Branch Name: </div>
<div class="branchNames">
<select id="branchname" name="branchname" />
<option value=""> Select a Branch </option>
</select><br />
</div>
</div>
</body>
解决方案
Each time an inout into your first select occurs you completely replace the second one. This deletes not only the old entries but also the registered event handlers.
You should either:
Only replace the select options of the second select (not the select itself) upon change in the first field or perform the registration of event handlers each time there is a change. JQuery supports this by the live()-method. (If you prefer this, have a look at http://api.jquery.com/live/)
相关推荐
猜您喜欢
精彩图集
