Question

我是编码的新手，因此我并不完全理解这段代码。
我想要实现的是我想要放入多个下拉菜单。

我的代码的问题是它只接受来自某些下拉菜单的值。

我的代码可以帮助用户根据他们在上一个下拉菜单中选择的内容来选择区域，国家和州。我正在使用此代码，因为它与我计划实现的类似。

我面临的问题是我有大约8个下拉菜单需要使用其数据。有8个区域下降，8个国家下降，8个州下降。全部在同一页面。如果我放了8个，代码就会停止工作。我究竟做错了什么？

有人可以帮帮我吗？这是代码：

<form>
Region&raquo; <select onchange="set_country(this,country,city_state)" size="1"     name="region">
<option value="" selected="selected">SELECT NOTE</option>
<option value=""></option>
<script type="text/javascript">
setRegions(this);
</script>
</select>
Country&raquo; <select name="country" size="1" disabled="disabled" onchange="set_city_state(this,city_state)"></select>
City/State&raquo; <select name="city_state" size="1" disabled="disabled" onchange="print_city_state(country,this)"></select>

<script>
    ////////////////////////////////////////////////////////////////////////////
// city_state.js ///////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////

    var countries = Object();

countries['C'] = '|C|Cm|';
countries['D'] = '|D|Dm|';

////////////////////////////////////////////////////////////////////////////

var city_states = Object();

//C
city_states['C'] = '|032010|335553|';
city_states['Cm'] = '|335543|';
city_states['D'] = '|000232|557775';
city_states['Dm'] = '|000231|557765';

/////////////////////////////////////////////// ///////////////////////////// ////////////////////////////////////////////////// //////////////////////////

function setRegions()
{
    for (region in countries)
        document.write('<option value="' + region + '">' + region + '</option>');
}

function set_country(oRegionSel, oCountrySel, oCity_StateSel)
{
    var countryArr;
    oCountrySel.length = 0;
    oCity_StateSel.length = 0;
    var region = oRegionSel.options[oRegionSel.selectedIndex].text;
    if (countries[region])
    {
        oCountrySel.disabled = false;
        oCity_StateSel.disabled = true;
        oCountrySel.options[0] = new Option('SELECT TYPE','');
        countryArr = countries[region].split('|');
    for (var i = 0; i < countryArr.length; i++)
        oCountrySel.options[i + 1] = new Option(countryArr[i], countryArr[i]);
    document.getElementById('txtregion').innerHTML = region;
    document.getElementById('txtplacename').innerHTML = '';
}
else oCountrySel.disabled = true;
}

function set_city_state(oCountrySel, oCity_StateSel)
{
var city_stateArr;
oCity_StateSel.length = 0;
var country = oCountrySel.options[oCountrySel.selectedIndex].text;
if (city_states[country])
{
    oCity_StateSel.disabled = false;
    oCity_StateSel.options[0] = new Option('SELECT TAB','');
    city_stateArr = city_states[country].split('|');
    for (var i = 0; i < city_stateArr.length; i++)
        oCity_StateSel.options[i+1] = new Option(city_stateArr[i],city_stateArr[i]);
    document.getElementById('txtplacename').innerHTML = country;
}
else oCity_StateSel.disabled = true;
}

function print_city_state(oCountrySel, oCity_StateSel)
{
var country = oCountrySel.options[oCountrySel.selectedIndex].text;
var city_state = oCity_StateSel.options[oCity_StateSel.selectedIndex].text;
if (city_state && city_states[country].indexOf(city_state) != -1)
    document.getElementById('txtplacename').innerHTML = city_state + ', ' + country;
else document.getElementById('txtplacename').innerHTML = country;
}

</script>

请查看http://jsfiddle.net/HzJ9J/1/上的更新代码我没有在Javascript部分粘贴一个javascript代码，因为我认为特定代码需要在正确的位置运行。不确定我是否必须将其移至javascript部分。

Answer 1

对setRegions(this);的调用失败，因为尚未定义＆＃39; setRegions;功能定义尚未被浏览器加载。

我在SELECT中添加了一个ID属性：

<select onchange="set_country(this,country,city_state)" size="1" name="region" id="region">

然后将调用setRegions移动到关闭SCRIPT标记之前的最后一件事。不能再使用THIS了，所以我添加了一个document.getElementById：

setRegions(document.getElementById("region"));

使用document.write通常是一个坏主意，并且当调用setRegions被移出行时，它将不起作用，因为它必须是。可以使用innerHTML完成同样的事情，所以我将setRegions更改为：

function setRegions(elem) {
    for (region in countries)
        elem.innerHTML +='<option value="'+region+'">'+region+'</option>';
}

我还从SELECT中删除了空的OPTION元素。这些更改使您的代码工作，尽管可能有更多的事情需要调整。

我应该回答问题，而不是提供建议，但如果你不使用Firefox和Firebug调试器，或Chrome中的类似工具，那么你的工作太难了！ / p>

编辑2014-07-21添加：您的代码：

<script type="text/javascript">
    setRegions(document.getElementById("region1"));
</script>

位于SELECT的开始和结束标记之间，ID为＆＃34; region1＆＃34;，我打赌在调用时DOM元素不存在。但是，如果我将JavaScript移动到文档的头部，该区域将选择工作，至少在Firefox中。我不确定为什么，我强烈建议你按照我在我的例子中所做的那样将这些内容移到最后，或者将其挂钩到onload。在开始操作DOM之前，确实必须设置DOM。

但是，当我使用Firebug调试器运行您刚才建议的更改代码时，它会告诉我：TypeError: oCountrySel.options is undefined。

获取Firebug的副本，在Firefox中安装，或使用Chrome中的开发人员工具，从您自己的服务器环境运行代码，然后查看控制台选项卡。它真的会对你有所帮助，而且它真的不难。

使用来自不同下拉菜单的值

1 个答案: