0
我已經設法填充我的下拉菜單與JSON對象，它工作正常。需要添加一個更多的下拉列表與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;
}
});
}
});
});
});
此代碼工作正常。現在我想在「模型」下拉下方再添加一個下拉標籤「修剪」。
當頁面加載就像「模型」下拉時，此下拉菜單也需要禁用。 在「模型」下拉列表中選擇某個值後，「修剪」下拉應該啓用。
我的問題是我怎樣才能通過json代碼添加「修剪」下拉列表中的值。
這是的jsfiddle的例如
http://jsfiddle.net/suresh_p12/QgY6N/2/
您想要插入的Json值位於Trim下拉列表中，您希望它添加到相同的json中，還是在選擇模型值後，它將在運行時提取。如果您能提供詳細信息，我們可以提供更好的幫助無論如何，我已經更新小提琴沒有數據修剪這裏是鏈接 - http://jsfiddle.net/visittoravi/QgY6N/3/ –