Question

我正在尝试创建一个关于国家/地区的网站，我尝试将其设置为一旦您选择一个国家/地区，它就会显示有关该国家/地区的信息。继承人我所拥有的：

<select>
<option selected disabled>Table of context</option>
<option value="1">Canada</option>
<option value="2">Finland</option>
<option value="3">Australia</option>
<option value="4">China</option>
<option value="5">Brazil</option>
<option value="5">Sweden</option>

我想这样做，一旦我选择巴西的例子，它会显示一些关于巴西的信息。当我选择芬兰时，它显示有关芬兰的信息。但我还没弄明白如何做到这一点，无法找到任何信息。有人可以帮忙吗？

Answer 1

尝试onchange function for select elemnt

Answer 2

您可以使用JQuery和隐藏的div来显示您的信息。

以下是使用您的国家/地区选择元素的演示：

$(function() {
    $('.Countries').hide(); 
    $('#countrySelect').change(function(){
    var countryVal = $('#countrySelect').val()
        if($('#countrySelect').val() != '') {
    	    $('.Countries').hide(); 
            $('#'+ countryVal).show(); 
        } else {
    	    $('.Countries').hide(); 
        } 
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id=countrySelect>
<option selected disabled>Table of context</option>
<option value="Canada">Canada</option>
<option value="Finland">Finland</option>
<option value="Australia">Australia</option>
<option value="China">China</option>
<option value="Brazil">Brazil</option>
<option value="Sweden">Sweden</option>
</select>
<div id='Canada' class='Countries'>
Text about Canada .....
</div>
<div id='Finland' class='Countries'>
Text about Finland .....
</div>
<div id='Australia' class='Countries'>
Text about Australia .....
</div>
<div id='China' class='Countries'>
Text about China .....
</div>
<div id='Brazil' class='Countries'>
Text about Brazil .....
</div>
<div id='Sweden' class='Countries'>
Text about Sweden .....
</div>

HTML选择标记文本

2 个答案: