我已经设法使用json对象填充我的下拉菜单，该工作正常。
Html如下。
<form name="contact_form" id="contact_form" >
<select id="make" name="make">
<option selected="selected" value="">Make</option>
</select> <br /><br />
<select name="model" id="model" disabled="disabled">
<option selected="selected" value="">Model</option>
</select> <br /><br />
<select name="monthly_payment" id="monthly_payment">
<option selected="selected" value="">Monthly Payment</option>
<option value="$299/mo or less">$299/mo or less</option>
<option value="$399/mo or less">$399/mo or less</option>
<option value="$499/mo or less">$499/mo or less</option>
<option value="$599/mo or less">$599/mo or less</option>
<option value="$699/mo or less">$699/mo or less</option>
</select> <br /><br />
<input name="name" id="name"type="text" value="Name">
<!--<input name="phone" id="phone" type="text" value="Phone" maxlength="10">-->
<input name="email" id="email" type="text" value="Email">
<input class="submit-btn" type="button" value="" id="check_form_button">
</form>
Json，js和jQuery代码如下：
var object = {
"Hyundai":[
{"Model":"ACCENT","URL":"#"},
{"Model":"AZERA","URL":"#"},
{"Model":"ELANTRA","URL":"#"},
{"Model":"ELANTRA GT","URL":"#"},
{"Model":"GENESIS","URL":"#"},
{"Model":"GENESIS COUPE","URL":"#"},
{"Model":"SANTA FE","URL":"#"},
{"Model":"SANTE FE SPORT","URL":"#"},
{"Model":"SONATA","URL":"#"},
{"Model":"SONATA HYBRID","URL":"#"},
{"Model":"TUSCON","URL":"#"},
{"Model":"VELOSTER","URL":"#"}
],
"Buick":[
{"Model":"ENCLAVE","URL":"#"},
{"Model":"ENCORE","URL":"#"},
{"Model":"LACROSSE","URL":"#"},
{"Model":"REGAL","URL":"#"},
{"Model":"VERANO","URL":"#"}
],
"GMC":[
{"Model":"SAVANA CARGO VAN","URL":"#"},
{"Model":"SIERRA 1500","URL":"#"},
{"Model":"SIERRA 2500 HD","URL":"#"},
{"Model":"SIERRA 3500 HD","URL":"#"},
{"Model":"TERRAIN","URL":"#"},
{"Model":"YUKON","URL":"#"},
{"Model":"YUKON XL","URL":"#"}
],
"Used Car":[
{"Model":"Used Car","URL":"#"}
]
};
function getList(key){
if(key!=''){
if(object.hasOwnProperty(key)){
var model_html = '';
$.each(object[key], function( index, row ) {
model_html +='<option value="'+row.Model+'">'+row.Model+'</option>';
});
$('#model').removeAttr('disabled').html(model_html);
}
}else{
$('#model').attr('disabled',true).html('<option value="" selected="selected">Model</option>');
}
}
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);};
$(document).ready(function() {
$("#phone").keydown(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
(event.keyCode == 65 && event.ctrlKey === true) ||
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
else {
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
event.preventDefault();
}
}
});
var html = '';
for (var key in object) {
html +='<option value="'+key+'">'+key+'</option>';
}
$('#make').append(html);
$('#make').change(function(){
getList($(this).val());
});
$('#name').focusin(function(){
$(this).val('');
}).focusout(function(){
if($(this).val()=='')
$(this).val('Name')
});
$('#phone').focusin(function(){
$(this).val('');
}).focusout(function(){
if($(this).val()=='')
$(this).val('Phone')
});
$('#email').focusin(function(){
$(this).val('');
}).focusout(function(){
if($(this).val()=='')
$(this).val('Email')
});
$('#check_form_button').click(function(){
var PhoneRegEx = new RegExp("/^[0-9]$/i");
if($('#make').val()==''){
alert('Please select a Make');
return false;
}
if($('#model').val()==''){
alert('Please select a Model');
return false;
}
if($('#monthly_payment').val()==''){
alert('Please select a monthly payment');
return false;
}
if($('#name').val()=='' ||$('#name').val()=='Name'){
alert('Please enter Name');
return false;
}
/*if($('#phone').val()=='' || $('#phone').val()=='Phone'){
alert('Please enter Phone ');
return false;
}else if( !$.isNumeric( $('#phone').val() )){
alert('Phone should be numeric');
return false;
}*/
if($('#email').val()=='' || $('#email').val()=='Email'){
alert('Please enter Email');
return false;
}else if( !isValidEmailAddress( $('#email').val() )){
alert('Please enter a valid Email');
return false;
}
$.ajax({
url : 'ajax-php/ajax-send-search-mail.php',
type : 'POST',
dataType:'json',
data : $('#contact_form').serialize(),
success:function(res){
$.each(object[$('#make').val()], function( index, row ) {
if(row.Model==$('#model').val()) {
window.location.href = row.URL;
}
});
}
});
});
});
此代码工作正常。现在我想在＆＃34;模型＆＃34;下面添加一个下拉菜单。下拉标签＆＃34;修剪＆＃34;。
当页面加载时，也需要禁用此下拉菜单，例如＆＃34; Model＆＃34;落下。 ＆＃34;修剪＆＃34;一旦在＆＃34;模型＆＃34;中选择某个值，就应该启用下拉菜单。下降。
我的问题是如何在＆＃34; Trim＆＃34;中添加值？通过json代码下拉。
这是jsfiddle的链接，例如
答案 0 :(得分：0)
您可以通过以下方式将JSON对象“data”绑定到下拉列表：
$.each(objdata["TeamList"], function(i, val) {
$('#ddlteams').append('<option value="' + val.teamid + '">' + val.teamname + '</option>');
});
这里让我们考虑JSON包含团队集合。用你的对象及其值来改变它。