下拉的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
      });
});