Question

我有3个选择器的下拉菜单。我想展示每个选择器onchange的内容。有人可以帮忙吗？

Codeply：https://www.codeply.com/go/M5JCiCq2qo

function myFunction() {
  var x = document.getElementById("filter-extras").value;
  document.getElementById("extra-filter").innerHTML = "You selected: " +
    x;
}

<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div>Content for Fuel replacement</div>
<div>Content for Portable WiFi hotspot</div>
<div>Content for Post-trip cleaning</div>

我认为使用jQuery会更容易。

Answer 1

使用普通的JS仍然可以很容易地做到这一点。您只需要向change添加select事件处理程序，然后就可以使用选择的value选择要显示和隐藏所有其他内容的内容，如下所示：

var content = document.querySelectorAll('.content');

document.querySelector('#filter-extras').addEventListener('change', function() {
  content.forEach(function(el) { el.style.display = 'none'; });
  document.querySelector('#' + this.value).style.display = 'block';
});

.content { 
  display: none;
}

<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>

如果您确实想在jQuery中执行此操作，则这里的逻辑翻译相同：

var $content = $('.content');

$('#filter-extras').on('change', function() {
  $content.hide();
  $('#' + this.value).show();
});

.content { 
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>

Answer 2

我试图制作两个具有相同行为和默认内容的版本。在这里，我们简单地在forEach循环中检查id是否等于所选值：

document.getElementById('filter-extras').addEventListener('change', myFunction)

function myFunction() {
  var x = document.getElementById('filter-extras').value;
  document.querySelectorAll('.content').forEach(function(element) {
    if (element.getAttribute('id') === x) {
      element.style = 'display:block'
    } else {
      element.style = 'display:none'
    }
  });
}

myFunction()

<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>

$("#filter-extras").on("change", myFunction)

function myFunction() {
  var x = $("#filter-extras").val();
  $('.content').each(function() {
    if ($(this).attr('id') === x) {
      $(this).show()
    } else {
      $(this).hide()
    }
  })
}

myFunction()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
  <option selected="selected" value="fuel">Fuel replacement</option>
  <option value="wifi">Portable WiFi hotspot</option>
  <option value="cleaning">Post-trip cleaning</option>
</select>

<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>

Answer 3

我想您已经找到答案了，但是如果您想在加载时默认显示所选内容，则应在代码中添加此行

//因此为了显示“燃油替换”的内容

$( function({
    const contentToShow = $('#filter-extras').val();
    $('#' + contentToShow).show();

   // after this you can add the code here
      $('#filter-extras').change(()=>{
        // show hide content here
      });
});

下拉的Onchange jQuery事件

3 个答案: