3 选项 select 从数据库中删除 onchange 设置值

3 option select set value from database remove onchange

我有 3 个 select 选项可以根据彼此加载值

我的第一个 select 是 Continent 它在加载第二个 select 时具有大陆的价值 select 是 Country 这个 select 将在更改时加载continent 然后 last select 是 City 这将在更改国家/地区时加载它工作正常

目前,由于 select 语句的 onchange 事件,当我从数据库加载数据到 select 时,它没有显示正确的数据,因为它显示的是数据当 on change 事件时。

我的问题是如何停止 3 select 选项的 onchange 事件,以便我可以从数据库加载数据 我认为停止 onchange 是从数据库加载数据的最佳方式。如果有任何其他选项可以在这些 select 上加载数据,我会很乐意尝试。

要阻止事件在 jQuery 中传播,我们有多种选择,例如 event.stopPropagation(), event.preventDefault()

现在在 onchange 函数中使用方法停止传播并使用 ajax() 方法从数据库加载值。

但我建议在大陆和国家/地区设置 onchange 事件,这样每当它们发生更改时,只需在 onchange 函数中使用 ajax 填充数据库中的相应子值。不需要停止传播。

我为你所在的州制作了一个示例代码。

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>:: Script Test Page ::</title>
    <script language='javascript'>
    function changeContient()
    {
        var selectItem = document.getElementById('contient').value;

        if ( selectItem=='1' )
        {
            // select database, using ajax.
            // add data into country option. under code is example data.
            var country = document.getElementById('country');
            country.options[0] = new Option('1-country1','1-country1');
            country.options[1] = new Option('1-country2','1-country2');
            country.options[2] = new Option('1-country3','1-country3');
        }
        else if ( selectItem=='2' )
        {
            // select database, using ajax.
            // add data into country option. under code is example data.
            var country = document.getElementById('country');
            country.options[0] = new Option('2-country1','2-country1');
            country.options[1] = new Option('2-country2','2-country2');
            country.options[2] = new Option('2-country3','2-country3');
        }
        else if ( selectItem=='3' )
        {
            // select database, using ajax.
            // add data into country option. under code is example data.
            var country = document.getElementById('country');
            country.options[0] = new Option('3-country1','3-country1');
            country.options[1] = new Option('3-country2','3-country2');
            country.options[2] = new Option('3-country3','3-country3');
        }
        else
        {
            return;
        }
    }

    function changeCountry()
    {
        // create soruce like changeContient()
    }
    </script>
</head>
<html>
    <body>
        Contient :
        <select id='contient' onChange='changeContient();'>
            <option value='1'>Contient1</option>
            <option value='2'>Contient2</option>
            <option value='3'>Contient3</option>
        </select>
        <br/>
        Country :
        <select id='country' onChange='changeCountry();'>
        </select>
        <br/>
    </body>
</html>