Форма отправки сбрасывает город dropDown javascript

Question

я сделал два динамических c раскрывающийся список State and city

Раскрывающийся список городов будет зависеть от выбранной опции состояния

проблема в том, что когда все в порядке и все в порядке. Это сбрасывает раскрывающийся список городов и не передает

javascript код для создания этих динамических c раскрывающийся список

эти функции являются событиями обмена

    // 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()">

после этого у меня не возникло той же проблемы, и сценарии работали нормально, спасибо всем