Question

JavaScript知识很少。我不能写，因为我不知道Javascript。我在等待你的帮助。

我想用SelectBox显示地址。我的HTML代码如下。选择1个城市时，只能看到该城市。怎么做？

示例：http://www.pakmaya.com.tr/tr/iletisim-bilgileri

我的代码;

<select class="form-control">
  <option value="miami">Miami</option>
  <option value="denver">Denver</option>
  <option value="paris">Paris</option>
</select>

<div class="miami">
<table>
   <tbody>
      <tr>
         <th scope="row">Phone</th>
         <td>+11 123 45 67</td>
      </tr>
      <tr>
         <th scope="row">Address</th>
         <td>One way Streen Miami /USA</td>
      </tr>
      <tr>
         <th scope="row">E-mail</th>
         <td>e-mail@mail.com</td>
      </tr>
   </tbody>
</table>

<div class="miamimaps">GOGOLEMAPSCODE</div>

</div>

<div class="denver">
<table>
   <tbody>
      <tr>
         <th scope="row">Phone</th>
         <td>+11 123 45 67</td>
      </tr>
      <tr>
         <th scope="row">Address</th>
         <td>One way Streen Miami /USA</td>
      </tr>
      <tr>
         <th scope="row">E-mail</th>
         <td>e-mail@mail.com</td>
      </tr>
   </tbody>
</table>

<div class="denvermaps">GOGOLEMAPSCODE</div>

</div>

<div class="paris">
<table>
   <tbody>
      <tr>
         <th scope="row">Phone</th>
         <td>+11 123 45 67</td>
      </tr>
      <tr>
         <th scope="row">Address</th>
         <td>One way Streen Miami /USA</td>
      </tr>
      <tr>
         <th scope="row">E-mail</th>
         <td>e-mail@mail.com</td>
      </tr>
   </tbody>
</table>

<div class="parismaps">GOGOLEMAPSCODE</div>

</div>

Answer 1

您需要检查change事件侦听器，并将选择输入中的值与选定城市的容器div的类进行比较。从那里设置样式以显示none或block全部取决于：

document.querySelector('.form-control').addEventListener('change', (e) => {
  const selectedOption = e.target.value
  
  Array.from(document.querySelectorAll('.miami, .denver, .paris')).forEach(elem => {
    if (elem.className !== selectedOption) {
      elem.style.display = 'none';
    } else {
      elem.style.display = 'block';
    }
  });
});

<select class="form-control">
  <option value="miami">Miami</option>
  <option value="denver">Denver</option>
  <option value="paris">Paris</option>
</select>

<div class="miami">
<table>
   <tbody>
      <tr>
         <th scope="row">Phone</th>
         <td>+11 123 45 67</td>
      </tr>
      <tr>
         <th scope="row">Address</th>
         <td>One way Streen Miami /USA</td>
      </tr>
      <tr>
         <th scope="row">E-mail</th>
         <td>e-mail@mail.com</td>
      </tr>
   </tbody>
</table>

<div class="miamimaps">GOGOLEMAPSCODE</div>

</div>

<div class="denver">
<table>
   <tbody>
      <tr>
         <th scope="row">Phone</th>
         <td>+11 123 45 67</td>
      </tr>
      <tr>
         <th scope="row">Address</th>
         <td>One way Streen Denver /USA</td>
      </tr>
      <tr>
         <th scope="row">E-mail</th>
         <td>e-mail@mail.com</td>
      </tr>
   </tbody>
</table>

<div class="denvermaps">GOGOLEMAPSCODE</div>

</div>

<div class="paris">
<table>
   <tbody>
      <tr>
         <th scope="row">Phone</th>
         <td>+11 123 45 67</td>
      </tr>
      <tr>
         <th scope="row">Address</th>
         <td>One way Streen Paris /FR</td>
      </tr>
      <tr>
         <th scope="row">E-mail</th>
         <td>e-mail@mail.com</td>
      </tr>
   </tbody>
</table>

<div class="parismaps">GOGOLEMAPSCODE</div>

</div>

Answer 2

以下是一种可能的解决方案：

<强> HTML

<select class="form-control">
    <option value="miami">Miami</option>    
    <option value="denver">Denver</option>
    <option value="paris">Paris</option>
</select>

<div class="city miami">
    <p>miami</p>
    <table>
        // ...
    </table>

    <div class="miamimaps">GOGOLEMAPSCODE</div>

</div>

<div class="city denver">
    <p>denver</p>
    <table>
        // ...
    </table>

    <div class="denvermaps">GOGOLEMAPSCODE</div>

</div>

<div class="city paris">
    <p>paris</p>
    <table>
        // ...
    </table>

    <div class="parismaps">GOGOLEMAPSCODE</div>

</div>

<强> CSS

.city {
    display: none;
}

.miami {
    display: block;
}

<强> JS

var select = document.getElementsByTagName('select')[0],
    cities = document.getElementsByClassName('city');

select.addEventListener('change', function(e) {
    var selectedCity = e.target.value,
        target = document.getElementsByClassName(selectedCity)[0];

    for(var i = 0; i < cities.length; i++) cities[i].style.display = 'none';

    target.style.display = 'block';
}, false);

jsfiddle

更新

jQuery版

var $cities = $('.city');

$('select').on('change', function() {
    var selectedCity = $(this).val(),
        $target = $('.' + selectedCity);

    $cities.hide();

    $target.show();
});

jsfiddle (jQuery version)

Javascript下拉列表选择获取数据

2 个答案: