时间戳

首页 > 解决方案 > javascript 在下拉框选择上显示所有关联的 DIV

javascript - javascript 在下拉框选择上显示所有关联的 DIV

问题描述

我是 javascript 新手，必须在这里和其他与此问题相关的其他地方查看几乎所有以前的问题，但似乎没有一个可以解决问题，因为它们使用 asp、php、Ajax 等。我对其他几个项目使用 jQuery 代码页面并发现他们的 css 可能会导致我的页面出现问题，并且我也不热衷于使用它。

就我而言，有没有办法从下拉框中选择一个国家，然后显示一个包含该国家/地区的州或省的下拉框。我的代码如下所示，但是当我运行它时，它会显示所有 DIV，而不仅仅是适用于所选国家的 DIV。如果一个国家/地区没有州/省，它只会显示 0 值。我想知道这段代码有什么问题。

第二个问题是，页面以默认国家及其州/省开头，但由于我在国家/地区选择上使用 onChange，因此不会触发 javascript，因为最初没有更改。无论如何，即使我确实更改了默认国家/地区，仍然会显示所有 DIV。

是否可以显示默认国家/地区的州/省，并且仍然使用 javascript 对默认选择进行任何更改。它没有在下面的示例中显示这一点，但国家和相关州/省的值来自数据库，因此不能合并到 javascript 中。

任何帮助或建议将不胜感激。

<TABLE>
    <TR><TD>Country</DIV></TD>
        <TD><SELECT NAME="countryid" onChange="showstate(this.options[this.selectedIndex].value)">
            <OPTION VALUE="NONE">Select a country</OPTION>
            <OPTION VALUE="CA" SELECTED>Canada</OPTION>
            <OPTION VALUE="US">United States</OPTION>
            <OPTION VALUE="ES">Spain</OPTION>
        </SELECT></TD>
    </TR>

<script>
 function showstate(country) {
    if (country == "CA") {
    hiddenDivUS.style.display='none';
    hiddenDivNONE.style.display='none';
    hiddenDivCA.style.display='block';
    } 
    else {
    if (country == "US") {
    hiddenDivCA.style.display='none';
    hiddenDivNONE.style.display='none';
    hiddenDivUS.style.display='block';
    } 
    else {
    hiddenDivCA.style.display='none';
    hiddenDivUS.style.display='none';
    hiddenDivNONE.style.display='block';
    }
  } 
</script>   

    <DIV ID="hiddenDivNONE" STYLE="display:none">
        <TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
            <TD><INPUT TYPE="hidden" NAME="provid" VALUE="0"></TD>
        </TR>     
    </DIV>

    <DIV ID="hiddenDivCA" STYLE="display:none">
        <TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
            <TD><SELECT NAME="provid">
                <OPTION VALUE="101">British Columbia</OPTION>
                .......
                <OPTION VALUE="165">Yukon Territories</OPTION>
            </SELECT></TD>
        </TR>     
    </DIV>

    <DIV ID="hiddenDivUS" STYLE="display:none">
        <TR><TD><DIV CLASS="inputlabel">Prov/State</DIV></TD>
            <TD><SELECT NAME="provid">
                <OPTION VALUE="201">Alaska</OPTION>
                .......
                <OPTION VALUE="265">Wyoming</OPTION>
            </SELECT></TD>
        </TR>     
    </DIV>
</TABLE>

它没有列出正确的 DIV，而是显示所有三个

标签： javascripthtml

解决方案

我想出了如何得到想要的结果（见下面的代码）


    <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <script>
    function showStates(country)
    {
        if (country == "101") 
        {   document.getElementById('CAprov').style.display='block';
            document.getElementById('Default').style.display='none';
            document.getElementById('USstate').style.display='none';
            document.getElementById('NoProv').style.display='none';
        }
        else if (country == "102")
        {   document.getElementById('CAprov').style.display='none';
            document.getElementById('Default').style.display='none';
            document.getElementById('USstate').style.display='block';
            document.getElementById('NoProv').style.display='none';
        }
        else
        {   document.getElementById('CAprov').style.display='none';
            document.getElementById('USstate').style.display='none';
            document.getElementById('Default').style.display='none';
            document.getElementById('NoProv').style.display='block';
        }
        return false;
    }
    </script>

    </HEAD>
    <BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">
    <FORM METHOD="post">
    <TABLE>
        <TR><TD>Country</TD>
            <TD><SELECT NAME="country" id="country" onChange="showStates(this.options[this.selectedIndex].value);">
                <OPTION VALUE="101" SELECTED>Canada</OPTION>
                <OPTION VALUE="102">United States</OPTION>
                <OPTION VALUE="314">Germany</OPTION>
            </SELECT></TD></TR>
        <TR ID="Default" STYLE="display: block;"><TD>Province</TD>
            <TD><SELECT NAME="provid">
                <OPTION VALUE="0">Select province</OPTION>
                <OPTION VALUE="139">Newfoundland/Labrador</OPTION>
                <OPTION VALUE="143">Nova Scotia</OPTION>
                <OPTION VALUE="134">New Brunswick</OPTION>
                <OPTION VALUE="149">Prince Edward Island</OPTION>
            </SELECT></TD></TR>
        <TR ID="CAprov" STYLE="display: none;"><TD>Province</TD>
            <TD><SELECT NAME="provid">
                <OPTION VALUE="0">Select province</OPTION>
                <OPTION VALUE="139">Newfoundland/Labrador</OPTION>
                <OPTION VALUE="143">Nova Scotia</OPTION>
                <OPTION VALUE="134">New Brunswick</OPTION>
                <OPTION VALUE="149">Prince Edward Island</OPTION>
            </SELECT></TD></TR>
        <TR ID="USstate" STYLE="display: none;"><TD>State</TD>
            <TD><SELECT NAME="provid">
                <OPTION VALUE="0">Select state</OPTION>
                <OPTION VALUE="102">Alabama</OPTION>
                <OPTION VALUE="105">Arizona</OPTION>
                <OPTION VALUE="106">Arkansas</OPTION>
                <OPTION VALUE="108">California</OPTION>
            </SELECT></TD></TR>   
        <TR ID="NoProv" STYLE="display: none;"><TD>Prov/State</TD>
            <TD><INPUT TYPE="hidden" NAME="provid" VALUE="0">&nbsp;</TD></TR>
    </TABLE>
        </FORM>
    </BODY>
    </HTML>

推荐阅读