Ajax表单.当从第一个选项中选择一个选项时,更新第二个选择
Ajax Form. Update Second Select when choose an option from the first one
我要到Javascript,我正在寻找一个表单。我发现了一些我编辑的代码,但它不起作用。我要做的是一个有两个选择下拉框的表单。当访客从第一个下拉列表中选择一个服务时,第二个下拉列表将自动更新为每个服务的人员名称。我已经将代码上传到jsFiddle。网址为http://jsfiddle.net/mrtxR/。我认为这将是非常简单的,但找不到任何教程和指导。
// The data that the service should return
// JSFiddle will echo it back for us on that URL
var doctors = {
success: true,
doctors: [
{
id: 71,
name: "George"
},
{
id: 72,
name: "James"
}
]
}
// This is what your JSON from PHP should look like
var jsonDoctors = JSON.stringify(doctors);
console.log(jsonDoctors);
// Bind change function to the select
jQuery(document).ready(function() {
jQuery("#services").change(onServiceChange);
});
function onServiceChange()
{
var serviceId = jQuery(this).val();
$.ajax({
url: '/echo/json/',
type: 'post',
data: {
serviceId: serviceId,
json: jsonDoctors // jsFiddle echos this back to us
},
success: onServicesRecieveSuccess,
error: onServicesRecieveError
});
}
function onServicesRecieveSuccess(data)
{
// Target select that we add the states to
var jTargetSelect = jQuery("#doctors");
// Clear old states
jTargetSelect.children().remove();
// Add new states
jQuery(data.doctors).each(function(){
jTargetSelect.append('<option value="'+this.id+'">'+this.name+'</option>');
});
}
function onServicesRecieveError(data)
{
alert("Could not get services. Please try again.");
}
您最后的评论是正确的,您应该为每个医生添加serviceId。你的伪javascript可以看起来像:
// The data that the service should return
// JSFiddle will echo it back for us on that URL
var doctors = {
success: true,
doctors: [
{
id: 71,
serviceId : 1,
name: "George"
},
{
serviceId : 2,
id: 72,
name: "James"
},
{
serviceId : 3,
id: 73,
name: "Ron"
},
{
serviceId : 1,
id : 77,
name : "Barak",
}
]
}
function getJsonDoctors(serviceId) {
var result = [];
var l = doctors.doctors;
for (var i = 0 ; i < l.length ; i++) {
if (l[i].serviceId == serviceId) {
result.push(l[i]);
}
}
return JSON.stringify({success : true,doctors : result});
}
// This is what your JSON from PHP should look like
var jsonDoctors = JSON.stringify(doctors);
console.log(jsonDoctors);
// Bind change function to the select
jQuery(document).ready(function() {
jQuery("#services").change(onServiceChange);
});
function onServiceChange()
{
var serviceId = jQuery(this).val();
$.ajax({
url: '/echo/json/',
type: 'post',
data: {
serviceId: serviceId,
json: getJsonDoctors(serviceId) // jsFiddle echos this back to us
},
success: onServicesRecieveSuccess,
error: onServicesRecieveError
});
}
function onServicesRecieveSuccess(data)
{
// Target select that we add the states to
var jTargetSelect = jQuery("#doctors");
// Clear old states
jTargetSelect.children().remove();
// Add new states
jQuery(data.doctors).each(function(){
jTargetSelect.append('<option value="'+this.id+'">'+this.name+'</option>');
});
}
function onServicesRecieveError(data)
{
alert("Could not get services. Please try again.");
}
相关文章:
- CKeditor:更改对话框中的默认选择选项
- 如何在从多选下拉列表中选择选项值时动态生成文本框
- AngularJs列表ng单击以选择选项转换
- 使用基于文本的 Jquery 选择选项
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- 选择选项时如何显示警报
- 使用php动态更改选择选项
- 选择“选择选项”时显示文本.怎么做
- LEAFLET地图和带有选择选项的标记-ANGULARjs
- 使用js将动态内容添加到选择选项列表中
- 用于使用javascript循环选择选项
- AngularJS-选择选项并在函数中使用它
- 禁用/启用基于单选/选择选项所选Javascript的文本框
- 如何使用jQuery隐藏与选择选项相关的选择选项列表
- 选择选项是添加或删除事件
- 使用jQuery向“选择选项”添加默认属性
- 构建HTML选择字段并使用JavaScript数组选择选项
- 带有动态选择选项的Firefox html5验证异常
- 只有当Angular从资源对象检索数据时,才选择选项元素