Question

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

我需要这样：

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

您必须添加类，以便能够跟踪更改选择：

<div class="selectcountry">Choose your country:
    <select class="selcountry">
        <option value='1'>Russia</option>
        <option value='2'>China</option>
        <option value='3'>Tajikistan</option>
    </select>
</div>
<div class="countrydepartment">Here should be a text dependingly on which country is chosen.
    <div id='countrycontacts'></div>
</div>

你的JavaScript / jQuery看起来像这样：

$(function () {
    var cc = ['Russian department: +7 (000) 000 00 00', 'Chinese department: +86 (000) 000 00 00', 'Tajikistan department: +992 (000) 000 00 00'];
    $('.selcountry').change(function(e) {
        var country = $(this).val() - 1;
        var contactinfo = cc[country];
        $('#countrycontacts').html(contactinfo);
    });
});

Answer 2

用户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>

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

2 个答案: