javascript - 选择“选择选项”时显示文本。怎么做？

Question

我试着用 hrefs 和 ids 来做。这不是我真正需要的。

我需要这样:

div.selectcountry {
  margin-bottom: 10px;
    font-family: arial;
  font-size: 12px;
  }
div.countrydepartment {
  font-family: arial;
  font-size: 12px;
  }

<div class="selectcountry">Choose your country: <select>
  <option>Russia</option>
  <option>China</option>
  <option>Tajikistan</option>
  </select></div>
  
<div class="countrydepartment">Here should be a text dependingly on which country is chosen.<br>
— Russian department: +7 (000) 000 00 00<br>
— Chinese department: +86 (000) 000 00 00<br>
— Tajikistan department: +992 (000) 000 00 00<br>
</div>

这是我需要的示例:http://fms-nso.ru/departments/13/

怎么做？也许使用 JS？但是怎么办？请解释一下。

感谢您的帮助和解释!

Answer 1

用户 jQuery 的更改事件监听器。

$('.selectcountry select').change(function() {
  country = $(this).val();
  //reset
  $('.countrydepartment span').removeClass('active');
  //show current countrydepartment
  $('.countrydepartment span[country="' + country + '"]').addClass('active');
});

div.selectcountry {
  margin-bottom: 10px;
  font-family: arial;
  font-size: 12px;
}
div.countrydepartment {
  font-family: arial;
  font-size: 12px;
}
.countrydepartment span {
  display: none;
}
.countrydepartment span.active {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="selectcountry">
  Choose your country:
  <select>
    <option selected disabled>--- Select Your Country ---</option>
    <option value='russia'>Russia</option>
    <option value='china'>China</option>
    <option value='tajikistan'>Tajikistan</option>
  </select>
</div>

<div class="countrydepartment">
  <span country='russia'>— Russian department: +7 (000) 000 00 00</span>
  <span country='china'>— Chinese department: +86 (000) 000 00 00</span>
  <span country='tajikistan'>— Tajikistan department: +992 (000) 000 00 00</span>
</div>