提交表单正在重置city dropDown javascript

Question

我制作了两个动态下拉列表State and city

城市下拉列表将取决于所选的州选项

问题是当一切都好并且可以提交时。它重置了城市下拉列表并且不提交

用于进行动态下拉的javascript代码是

这些函数是更改事件

// remove all previous options 
function removeOptions(selectbox) {
for (let i = selectbox.options.length - 1; i >= 0; i--) {
selectbox.remove(i);
}
}
// function to make city drop down according to selected state
function cityFunction(){
// get input value and text
const stateobj = document.getElementById('stateDropDown');
const valueState = stateobj.options[stateobj.selectedIndex].text;
const selectedOption = stateobj.options[stateobj.selectedIndex].value;
// making required arrays 
let sindhArray = [ 'Select City', 'Karachi', 'Hyderabad', 'Mirpur khas', 'Sukkhar', 'Shikarpur' ];
let KhyberArray = [ 'Select City', 'gilgit', 'Qalat', 'Balakoot', 'Sawat', 'Peshwar' ];
let punjabArray = [ 'Select City', 'Lahore', 'Fasialabad', 'Qasoor', 'SheikhuPura', 'Gujrat' ];
let balochArray = [ 'Select City', 'Quetta', 'Chaman', 'Khuzdar', 'Turbat', 'Gawdar' ];

// if value is punjab or any select cities according to that state
if (valueState == 'Punjab') {
// removing all previous present options 
removeOptions(document.getElementById('cityDropDown'));
let cityD = document.querySelector('#cityDropDown');
let index = 0;
for (let ele of punjabArray) {
var opt = document.createElement('option');
opt.value = index;
opt.innerHTML = ele; // whatever property it has
document.getElementById('cityDropDown').value = cityD.appendChild(opt);
index++;
}
}
if (valueState == 'Sindh') {
removeOptions(document.getElementById('cityDropDown'));
let cityD = document.querySelector('#cityDropDown');
let index = 0;
for (let ele of sindhArray) {
var opt = document.createElement('option');
opt.value = index;
opt.innerHTML = ele; // whatever property it has
document.getElementById('cityDropDown').value = cityD.appendChild(opt);
index++;
}
}
if (valueState == 'Balochistan') {
removeOptions(document.getElementById('cityDropDown'));
let cityD = document.querySelector('#cityDropDown');
let index = 0;
for (let ele of balochArray) {
var opt = document.createElement('option');
opt.value = index;
opt.innerHTML = ele; // whatever property it has
document.getElementById('cityDropDown').value = cityD.appendChild(opt);
index++;
}
}
if (valueState == 'khyber Pakhtunkhwa') {
removeOptions(document.getElementById('cityDropDown'));
let cityD = document.getElementById('cityDropDown');
let index = 0;
for (let ele of KhyberArray) {
var opt = document.createElement('option');
opt.value = index;
opt.innerHTML = ele; // whatever property it has
document.getElementById('cityDropDown').value = cityD.appendChild(opt);
index++;
}
}
}

对于城市表单验证，更改事件为

function cityDown() {
const cityObj = document.getElementById('cityDropDown');
const cityText = cityObj.options[cityObj.selectedIndex].text;
const valueOfCity = cityObj.options[cityObj.selectedIndex].value;
let citiesArray = [
'Quetta',
'Chaman',
'Khuzdar',
'Turbat',
'Gawdar',
'Lahore',
'Fasialabad',
'Qasoor',
'SheikhuPura',
'Gujrat',
'gilgit',
'Qalat',
'Balakoot',
'Sawat',
'Peshwar',
'Karachi',
'Hyderabad',
'Mirpur khas',
'Sukkhar',
'Shikarpur'
];
if ( valueOfCity == 0) {
document.getElementById('cityErr').innerText = 'City is required';
document.getElementById('cityDropDown').focus();
return valueOfCity;
}
if (citiesArray.indexOf(cityText) < 0) {
document.getElementById('cityErr').innerText = 'Select City';
document.getElementById('cityDropDown').focus();
return valueOfCity;
} else {
document.getElementById('cityErr').innerText = '';
return valueOfCity;
};
}

主要功能是

// validation f0rm function
function validateForm() {
// creating variable then sanitize them
isTrueorFalse = false;
document.getElementById('Address').disabled = isTrueorFalse;
document.getElementById('stateDropDown').disabled = isTrueorFalse;
document.getElementById('stateDropDown').style.background = '#FFF';
document.getElementById('cityDropDown').disabled = isTrueorFalse;
document.getElementById('cityDropDown').style.background = '#FFF';
const stateVal = stateDrag();
const cityV = cityDown();
const userAddress = form.Address.value;
//States must not be unselected
if (stateVal == 0 || stateVal == '') {
document.getElementById('stateErr').innerText = 'State is required.';
document.getElementById('stateDropDown').focus();
return false;
}
if (stateVal < 0) {
document.getElementById('stateErr').innerText = 'State is required.';
document.getElementById('stateDropDown').focus();
return false;
}
document.getElementById('addressErr').innerText = '';
document.getElementById('cityDropDown').focus();
console.log(cityV);
if (cityV == 0 || cityV == '') {
document.getElementById('cityErr').innerText = 'State is required.';
document.getElementById('cityDropDown').focus();
return false;
}

document.getElementById('cityErr').innerText = '';
document.getElementById('signupForm').submit();
}

在这里演示

https://jsbin.com/jeguwakolo/1/edit?html，css，js，控制台，输出

Answer 1

onsubmit再次调用该函数，并重置城市下拉列表。

为了解决这个问题，我刚刚从stateDrag((中删除了该函数在html中，我做了这个

<select oninput ="return stateDrag()" onchange="return cityFunction()">

在这之后，我没有遇到同样的问题，脚本也很好，谢谢大家