javascript在下拉框中显示所有相关的div_Javascript_Html

javascript在下拉框中显示所有相关的div

javascript html

javascript在下拉框中显示所有相关的div,javascript,html,Javascript,Html,我对javascript还不熟悉，必须已经看过这里和其他地方与这个问题相关的几乎所有以前的问题，但似乎没有一个能做到这一点，因为它们使用asp、php、Ajax等。我对页面上的其他几个项目使用jQuery代码，发现它们的css会导致我的页面出现问题，我也不喜欢使用它在我的例子中，是否有一种方法可以从下拉框中选择一个国家，然后显示该国家的州或省的下拉框。我的代码如下所示，但当我运行它时，它会显示所有DIV，而不仅仅是适用于所选国家/地区的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>


国家
选择一个国家
加拿大
美国
西班牙
功能显示状态（国家/地区）{
如果（国家=“CA”）{
hiddenDivUS.style.display='none'；
hiddenDivNONE.style.display='none'；
hiddenDivCA.style.display='block'；
} 
否则{
如果（国家=“美国”）{
hiddenDivCA.style.display='none'；
hiddenDivNONE.style.display='none'；
hiddenDivUS.style.display='block'；
} 
否则{
hiddenDivCA.style.display='none'；
hiddenDivUS.style.display='none'；
hiddenDivNONE.style.display='block'；
}
} 
省/州
省/州
不列颠哥伦比亚省
.......
育空地区
省/州
阿拉斯加州
.......
怀俄明州

它没有列出正确的DIV，而是首先显示所有三个DIV，注意大写字母

其次，尝试将所有js保持在页面底部

这段代码使用的是ES6，所以您可能想检查它是否能在所有浏览器中工作，但您可以看到发生了什么

大多数浏览器都支持el.classList，但是

add

、

remove

和

toggle

不支持（我们不支持..现在不确定）

我使用了一些正则表达式，使用id

state\uuu

获取所有元素，这样我们就可以隐藏它们，然后我们将精确的元素作为目标，使其可见，您可能也可以清理它

<style>
    .hidden {
        display: none;
    }
</style>


<select name="countryid" onChange="showState(event)">
    <option value="">Select a country</option>
    <option value="ca">Canada</option>
    <option value="us">United States</option>
    <option value="es">Spain</option>
</select>

<div id="state_ca" class="hidden">
  This is hidden unless Canada is selected.
</div>
<div id="state_us" class="hidden">
  This is hidden unless America is selected.
</div>

<script>
    function showState(event) {
        const countryCode = event.target.value;
        const states = document.querySelectorAll('[id^=state_]');
        const el = document.getElementById(`state_${countryCode}`);

        states.forEach(el => {
            if (el.classList.contains('hidden')) {
                return;
            }
            el.classList.add('hidden');
        });

        if (el) {
            el.classList.remove('hidden');
        }
    }
</script>


.隐藏{
显示：无；
}
选择一个国家
加拿大
美国
西班牙
除非选择了加拿大，否则此选项将隐藏。
除非美国被选中，否则这是隐藏的。
函数showState（事件）{
const countryCode=event.target.value；
const states=document.querySelectorAll（“[id^=state_uz]”）；
const el=document.getElementById（`state_${countryCode}`）；
states.forEach（el=>{
if（el.classList.contains（'hidden'））{
返回；
}
el.classList.add（'hidden'）；
});
如果（el）{
el.classList.remove（'hidden'）；
}
}

根据我的说法，这可以解决您的问题。您可以对代码进行一些我没有做的更改。

函数addStates（）{
var selectCountry=document.getElementById（“selectCountry”）.value；
console.log（选择国家/地区）；
var selectState=document.getElementById（“selectState”）；
如果（选择国家=“印度”）{
var option1=document.createElement（“选项”）；
选项1.value=“旁遮普”；
选项1.text=“旁遮普”；
选择state.add（选项1）；
var option2=document.createElement（“选项”）；
option2.value=“卡纳塔克邦”；
option2.text=“卡纳塔克邦”；
选择state.add（选项2）；
}如果出现其他情况（选择国家==“美国”）{
var option1=document.createElement（“选项”）；
选项1.value=“佛罗里达”；
option1.text=“佛罗里达”；
选择state.add（选项1）；
var option2=document.createElement（“选项”）；
选项2.value=“加利福尼亚”；
option2.text=“加利福尼亚”；
选择state.add（选项2）；
}
}


选择一个国家：
请选择一个国家/地区
印度
美国
请选择一个状态：

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


功能显示状态（国家/地区）
{
如果（国家=“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'；
}
否则，如果（国家=“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'；
}
其他的
{document.getElementById（'CAprov'）.style.display='none'；
document.getElementById（'USstate'）.style.display='none'；
document.getElementById（'Default'）.style.display='none'；

    <!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>