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>
我有 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>