下拉的Onchange jQuery事件

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
      });
});