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

时间:2015-02-13 07:09:09

标签: javascript jquery mysql select onchange

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

我的第一个选择是Continent它在加载时具有大陆的值第二个选择是Country此选择将在大陆更改时加载,然后最后一个选择是City这将被加载在改变国家方面它运作良好

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

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

2 个答案:

答案 0 :(得分:1)

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

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

但是我建议在Continent和country上进行onchange事件,这样每当它们被更改时,只需使用onchange函数中的ajax从数据库填充相应的子值。没有必要停止传播。

答案 1 :(得分:0)

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



<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>
&#13;
&#13;
&#13;