javascript - 提交表单正在重置城市 dropDown javascript

问题描述

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

城市下拉菜单将取决于所选的州选项

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

用于制作这些动态下拉列表的 javascript 代码是

这些函数是 onchange 事件


    // 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++;
        }
    }
    }

对于城市表单验证 onchange 事件是

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,console,output

标签： javascriptalgorithmdebugging

javascript - 提交表单正在重置城市 dropDown javascript

问题描述

解决方案

推荐阅读