猿问

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，而是显示了所有三个


拉莫斯之舞
浏览 214回答 3
3回答

慕田峪4524236

我想出了如何获得所需的结果（见下面的代码）&nbsp; &nbsp; <!DOCTYPE HTML>&nbsp; &nbsp; <HTML>&nbsp; &nbsp; <HEAD>&nbsp; &nbsp; <script>&nbsp; &nbsp; function showStates(country)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; if (country == "101")&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp;document.getElementById('CAprov').style.display='block';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('Default').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('USstate').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('NoProv').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else if (country == "102")&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp;document.getElementById('CAprov').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('Default').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('USstate').style.display='block';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('NoProv').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp;document.getElementById('CAprov').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('USstate').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('Default').style.display='none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('NoProv').style.display='block';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; &nbsp; </script>&nbsp; &nbsp; </HEAD>&nbsp; &nbsp; <BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0" BORDER="0">&nbsp; &nbsp; <FORM METHOD="post">&nbsp; &nbsp; <TABLE>&nbsp; &nbsp; &nbsp; &nbsp; <TR><TD>Country</TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TD><SELECT NAME="country" id="country" onChange="showStates(this.options[this.selectedIndex].value);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="101" SELECTED>Canada</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="102">United States</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="314">Germany</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </SELECT></TD></TR>&nbsp; &nbsp; &nbsp; &nbsp; <TR ID="Default" STYLE="display: block;"><TD>Province</TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TD><SELECT NAME="provid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="0">Select province</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="139">Newfoundland/Labrador</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="143">Nova Scotia</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="134">New Brunswick</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="149">Prince Edward Island</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </SELECT></TD></TR>&nbsp; &nbsp; &nbsp; &nbsp; <TR ID="CAprov" STYLE="display: none;"><TD>Province</TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TD><SELECT NAME="provid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="0">Select province</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="139">Newfoundland/Labrador</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="143">Nova Scotia</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="134">New Brunswick</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="149">Prince Edward Island</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </SELECT></TD></TR>&nbsp; &nbsp; &nbsp; &nbsp; <TR ID="USstate" STYLE="display: none;"><TD>State</TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TD><SELECT NAME="provid">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="0">Select state</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="102">Alabama</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="105">Arizona</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="106">Arkansas</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <OPTION VALUE="108">California</OPTION>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </SELECT></TD></TR>&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <TR ID="NoProv" STYLE="display: none;"><TD>Prov/State</TD>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TD><INPUT TYPE="hidden" NAME="provid" VALUE="0">&nbsp;</TD></TR>&nbsp; &nbsp; </TABLE>&nbsp; &nbsp; &nbsp; &nbsp; </FORM>&nbsp; &nbsp; </BODY>&nbsp; &nbsp; </HTML>
0

慕的地10843

根据我的说法，这可以解决您的问题。你可以对代码做一些我没有做的改动。function addStates() {&nbsp; var selectCountry = document.getElementById("selectCountry").value;&nbsp; console.log(selectCountry);&nbsp; var selectState = document.getElementById("selectState");&nbsp; if (selectCountry == "india") {&nbsp; &nbsp; var option1 = document.createElement("option");&nbsp; &nbsp; option1.value = "punjab";&nbsp; &nbsp; option1.text = "Punjab";&nbsp; &nbsp; selectState.add(option1);&nbsp; &nbsp; var option2 = document.createElement("option");&nbsp; &nbsp; option2.value = "karnataka";&nbsp; &nbsp; option2.text = "Karnataka";&nbsp; &nbsp; selectState.add(option2);&nbsp; } else if (selectCountry == "usa") {&nbsp; &nbsp; var option1 = document.createElement("option");&nbsp; &nbsp; option1.value = "florida";&nbsp; &nbsp; option1.text = "Florida";&nbsp; &nbsp; selectState.add(option1);&nbsp; &nbsp; var option2 = document.createElement("option");&nbsp; &nbsp; option2.value = "california";&nbsp; &nbsp; option2.text = "California";&nbsp; &nbsp; selectState.add(option2);&nbsp; }}<!DOCTYPE html><html><head>&nbsp; <title></title></head><body>&nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <span>Select a country: </span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <select onchange="addStates()" id="selectCountry">&nbsp; &nbsp; &nbsp; &nbsp; <option value="" selected disabled>Please select a country</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="india">India</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="usa">USA</option>&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <span>Please select a state: </span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <select id="selectState">&nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; </div>&nbsp; </div></body></html>
0

慕桂英546537

首先，小心你的首都。其次尽量让所有js都在页面底部。这段代码使用 ES6，所以你可能想检查它是否适用于所有浏览器，但你可以看到发生了什么。然而大多数浏览器都支持 el.classList add，remove并且toggle不支持（现在不确定）我使用了一些正则表达式来获取所有使用 id 的元素，state_这样我们就可以隐藏它们，然后我们瞄准确切的一个以使其可见，你也可以清理它。<style>&nbsp; &nbsp; .hidden {&nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; }</style><select name="countryid" onChange="showState(event)">&nbsp; &nbsp; <option value="">Select a country</option>&nbsp; &nbsp; <option value="ca">Canada</option>&nbsp; &nbsp; <option value="us">United States</option>&nbsp; &nbsp; <option value="es">Spain</option></select><div id="state_ca" class="hidden">&nbsp; This is hidden unless Canada is selected.</div><div id="state_us" class="hidden">&nbsp; This is hidden unless America is selected.</div><script>&nbsp; &nbsp; function showState(event) {&nbsp; &nbsp; &nbsp; &nbsp; const countryCode = event.target.value;&nbsp; &nbsp; &nbsp; &nbsp; const states = document.querySelectorAll('[id^=state_]');&nbsp; &nbsp; &nbsp; &nbsp; const el = document.getElementById(`state_${countryCode}`);&nbsp; &nbsp; &nbsp; &nbsp; states.forEach(el => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.classList.contains('hidden')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.classList.add('hidden');&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; if (el) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.classList.remove('hidden');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答