答案 0 :(得分：0)
这是解决问题的另一种方法。我不是手动创建HTML中的所有buildForms标记，而是使用函数buildSelect创建它们，并使用数据结构将所有国家/州/城市保留在一个位置。我使用select函数生成所有updateStates标记以及函数updateCities和var data = {
countries: [{
name: 'China',
childs: [{
name: 'Beijing',
childs: [{name: 'Beijing'}, {name: 'Dongcheng'}]
}, {
name: 'Tianjin',
childs: [{name: 'Guangzhou'}, {name: 'Shanghai'}]
}]
}, {
name: 'India',
childs: [{
name: 'Uttar',
childs: [{name: 'Kanpur'}, {name: 'Ghaziabad'}]
}, {
name: 'Maharashtra',
childs: [{name: 'Mumbai'}, {name: 'Pune'}]
}]
}, {
name: 'USA',
childs: [{
name: 'Washington',
childs: [{name: 'Washington'}, {name: 'Seatle'}]
}, {
name: 'Florida',
childs: [{name: 'Orlando'}, {name: 'Miamy'}]
}]
}]
};
function buildSelect(name, data, childs) {
var div = $('<div>');
div.addClass('hidden autoSelect ' + data.name + ' ' + name);
var label = $('<label>');
label.text(name);
var select = $('<select>');
var option = $('<option>');
option.text('--');
select.append(option);
data.childs.forEach(function (child) {
option = $('<option>');
option.val(child.name);
option.text(child.name);
select.append(option);
});
if (childs) select.on('change', updateCities);
label.append(select);
div.append(label);
$('.country').append(div);
}
function buildForms(data) {
data.countries.forEach(function (country) {
buildSelect('State', country, true);
country.childs.forEach(function (state) {
buildSelect('City', state);
});
});
}
function hideAutoSelect (name) {
$('div.autoSelect.'+name).addClass('hidden');
}
function updateStates() {
var v = this.value;
if (v) {
hideAutoSelect('State');
hideAutoSelect('City');
var div = $('div.autoSelect.'+v);
div.removeClass('hidden');
var select = $('select', div);
if (select.val()) $('div.autoSelect.'+select.val()).removeClass('hidden');
}
}
function updateCities() {
var v = $(this).val();
if (v) {
hideAutoSelect('City');
$('div.autoSelect.'+v).removeClass('hidden');
}
}
$(document).on('ready',function () {
buildForms(data);
$('[name=country]').on('change', updateStates);
});来隐藏/显示元素。
.hidden {display: none}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3>Add Client</h3>
<div class="tab-content">
<form action="/add/clients" method="post">
<div class="top-row">
<div class="field-wrap">
<label>Client ID<span class="req">*</span>
<input placeholder="0000000">
</label>
</div>
</div>
<div class="top-row">
<div class="field-wrap">
<label>Client name<span class="req">*</span>
<input placeholder="John">
</label>
</div>
</div>
<div class="field-wrap">
<label>Client type<span class= "req">*</span>
<select>
<option selected= "--">--</option>
</select>
</label>
</div>
<div class="field-wrap country">
<label>Client Origin<span class="req">*</span>
<select name="country">
<option selected= "--">--</option>
<option value= "China" >China</option>
<option value= "India" >India</option>
<option value= "USA" >USA</option>
</select>
</label>
</div>
</form>
</div>
</div>"Caused by: shaded.com.google.cloud.spanner.SpannerException: INVALID_ARGUMENT: DML statements(INSERT, UPDATE and DELETE) are not supported."