0

所以我想创建一个下拉列表“大陆”，并根据所选的大陆，显示另一个下拉列表与各自的国家。

我能够创建“大陆”下拉列表，但是当我点击大陆时，它不会显示国家。有什么想法我的代码有什么问题吗？

我的 HTML 代码是：

<!DOCTYPE html>


<body>
    <select id="continents">
        <option value="dummy">Select</option>
        <option value="AF">Africa</option>
        <option value="AM">America</option>
        <option value="AS">Asia</option>
        <option value="OC">Oceania</option>
        <option value="EU">Europe</option>
    </select>

    <select id="countries" class="AF">
        <option>Select</option>
        <option>Algeria</option>
        <option>Angola</option>
        <option>Benin</option>
        <option>Botswana</option>
        <option>Burkina</option>
        <option>Burundi</option>
        <option>Cameroon</option>
        <option>Cape Verde</option>
        <option>Central African Republic</option>
        <option>Chad</option>
        <option>Comoros</option>
        <option>Congo</option>
        <option>Congo, Democratic Republic of</option>
        <option>Djibouti</option>
        <option>Egypt</option>
        <option>Equatorial Guinea</option>
        <option>Eritrea</option>
        <option>Ethiopia</option>
        <option>Gabon</option>
        <option>Gambia</option>
        <option>Ghana</option>
        <option>Guinea</option>
        <option>Guinea-Bissau</option>
        <option>Ivory Coast</option>
        <option>Kenya</option>
        <option>Lesotho</option>
        <option>Liberia</option>
        <option>Libya</option>
        <option>Madagascar</option>
        <option>Malawi</option>
        <option>Mali</option>
        <option>Mauritania</option>
        <option>Mauritius</option>
        <option>Morocco</option>
        <option>Mozambique</option>
        <option>Namibia</option>
        <option>Niger</option>
        <option>Nigeria</option>
        <option>Rwanda</option>
        <option>Sao Tome and Principe</option>
        <option>Senegal</option>
        <option>Seychelles</option>
        <option>Sierra Leone</option>
        <option>Somalia</option>
        <option>South Africa</option>
        <option>South Sudan</option>
        <option>Sudan</option>
        <option>Swaziland</option>
        <option>Tanzania</option>
        <option>Togo</option>
        <option>Tunisia</option>
        <option>Uganda</option>
        <option>Zambia</option>
        <option>Zimbabwe</option>
    </select>

    <select id="countries" class="AM">
        <option>Select</option>
        <option>Antigua and Barbuda</option>
        <option>Bahamas</option>
        <option>Argentina</option>
        <option>Barbados</option>
        <option>Belize</option>
        <option>Bolivia </option>
        <option>Brazil</option>
        <option>Canada</option>
        <option>Cayman Islands</option>
        <option>Chile</option>
        <option>Chile</option>
        <option>Colombia</option>
        <option>CubaCosta Rica</option>
        <option>Dominica</option>
        <option>Dominican Republic</option>
        <option>Ecuador</option>
        <option>El Salvador</option>
        <option>French Guyana</option>
        <option>Greenland</option>
        <option>Grenada</option>
        <option>Guatemala</option>
        <option>Guyana</option>
        <option>Haiti</option>
        <option>Honduras</option>
        <option>Jamaica</option>
        <option>Mexico</option>
        <option>Nicaragua</option> 
        <option>Panama</option> 
        <option>Paraguay</option> 
        <option>Peru</option> 
        <option>Puerto Rico</option> 
        <option>Saint Kitts and Nevis</option>
        <option>Saint Lucia</option> 
        <option>Saint Vincent and the Grenadines</option> 
        <option>Suriname</option> 
        <option>Trinidad and Tobago</option>
        <option>Turks and Caicos</option> 
        <option>United States</option>
        <option>Uruguay</option> 
        <option>Venezuela</option> 
    </select>

    <select id="countries" class="AS">
        <option>Select</option>
        <option>Afghanistan</option> 
        <option>Bahrain</option>
        <option>Bangladesh</option>
        <option>Bhutan</option>
        <option>Brunei</option>
        <option>Cambodia</option>
        <option>China</option>
        <option>East Timor</option>
        <option>India</option>
        <option>Indonesia</option>
        <option>Iran</option>
        <option>Iraq</option>
        <option>Israel</option>
        <option>Japan</option>
        <option>Jordan</option>
        <option>Kazakhstan</option>
        <option>Korea North</option>
        <option>Korea South</option>
        <option>Kuwait</option>
        <option>Kyrgyzstan</option>
        <option>Laos</option>
        <option>Lebanon</option>
        <option>Malaysia</option>
        <option>Maldives</option>
        <option>Mongolia</option>
        <option>Myanmar (Burma)</option>
        <option>Nepal</option>
        <option>Oman</option>
        <option>Pakistan</option>
        <option>The Philippines</option>
        <option>Qatar</option>
        <option>Russia</option>
        <option>Saudi Arabia</option>
        <option>Singapore</option>
        <option>Sri Lanka</option>
        <option>Syria</option>
        <option>Taiwan</option>
        <option>Tajikistan</option>
        <option>Thailand</option>
        <option>Turkey</option>
        <option>Turkmenistan</option>
        <option>United Arab Emirates</option>
        <option>Uzbekistan</option>
        <option>Vietnam</option>
        <option>Yemen</option>
    </select>

    <select id="countries" class="OC">
        <option>Australia</option>
        <option>Fiji</option>
        <option>Kiribati</option>
        <option>Marshall Islands</option>
        <option>Micronesia</option>
        <option>Nauru</option>
        <option>New Zealand</option>
        <option>Palau</option>
        <option>Papua New Guinea</option>
        <option>Samoa</option>
        <option>Solomon Islands</option>
        <option>Tonga</option>
        <option>Tuvalu</option>
        <option>Vanuatu</option>
    </select>

    <select id="countries" class="EU">
        <option>Albania</option>
        <option>Andorra</option>
        <option>Armenia</option>
        <option>Austria</option>
        <option>Azerbaijan</option>
        <option>Belarus</option>
        <option>Belgium</option>
        <option>Bosnia & Herzegovina</option>
        <option>Bulgaria</option>
        <option>Croatia</option>
        <option>Cyprus</option>
        <option>Czech Republic</option>
        <option>Denmark</option>
        <option>Estonia</option>
        <option>Finland</option>
        <option>France</option>
        <option>Georgia</option>
        <option>Germany</option>
        <option>Greece</option>
        <option>Hungary</option>
        <option>Iceland</option>
        <option>Ireland</option>
        <option>Italy</option>
        <option>Kosovo</option>
        <option>Latvia</option>
        <option>Liechtenstein</option>
        <option>Lithuania</option>
        <option>Luxembourg</option>
        <option>Macedonia</option>
        <option>Malta</option>
        <option>Moldova</option>
        <option>Monaco</option>
        <option>Montenegro</option>
        <option>The Netherlands</option>
        <option>Norway</option>
        <option>Poland</option>
        <option>Portugal</option>
        <option>Romania</option>
        <option>Russia</option>
        <option>San Marino</option>
        <option>Serbia</option>
        <option>Slovakia</option>
        <option>Slovenia</option>
        <option>Spain</option>
        <option>Sweden</option>
        <option>Switzerland</option>
        <option>Turkey</option>
        <option>Ukraine</option>
        <option>United Kingdom</option>
        <option>Vatican City (Holy See)</option>
    </select>
</body>

我的 JavaScript 代码是

<script language="javascript">
$("#continents").change(function(){
   var value = $(this).val();
     $("#countries").css('display','none'); 
    $("."+value).css('display','block'); 

});

});

4

1 回答 1

1

保持道德方便永远不要重复 id，将它们更改为类并查看它的工作原理，您也可以将其重写为。

$("#continents").change(function(){
     $(".countries").not($("."+this.value).show()).hide(); 
});

小提琴

如果您复制 id 并将 id 选择器与 vanilla JS 或 jquery 或其他任何东西一起使用，它将仅选择在 DOM 中以该 ID 出现的第一个元素。但是您可以使用属性选择器来选择 id。即$("[id='countries']").css('display','none')，但不要使用它。

于 2013-09-24T00:18:44.063 回答