如何使用Javascript确保下拉菜单中选择的所有选项均显示第一列？
[英]How do I use Javascript to ensure that the first column appears for all the options selected in the drop-down menu?
问题描述
A pretty basic question from a first-timer here. 
初学者的一个基本问题。 I require your help in amending the JavaScript in the below code so that the first column (id="First Column") appears on the left for all the options selected. 在修改下面的代码中的JavaScript时，我需要您的帮助，以便所有选择的选项的第一列（id =“ First Column”）出现在左侧。 I have searched multiple threads and sites but haven't been able to crack this. 我搜索了多个线程和站点，但未能破解。
Also would like to know if a Javascript code would be better to crack this or Jquery would be better if I need to use this on a Wordpress site. 还想知道，如果我需要在Wordpress网站上使用Javascript代码来破解它，还是使用Jquery更好。 Most people suggest JS a better option for Wordpress, was wondering about the same. 大多数人都认为JS是Wordpress的一个更好的选择，对此也感到疑惑。
I'm sure its a pretty basic query and any help with this would be much appreciated. 我确信它是一个非常基本的查询，对此的任何帮助将不胜感激。
<!DOCTYPE html> <html> <head> <title></title> </head> <style> .inv { display: none; } </style> <body> <select id="target"> <option value="">Select...</option> <option value="content_1">Option 1</option> <option value="content_2">Option 2</option> <option value="content_3">Option 3</option> <select> <div id="First Column" class="inv"> <ul class="cd-features-list"> <li>Dis</li> <li>Wea</li> <li>Tra</li> </ul> </div> <div id="content_1" class="inv">Option 1 <ul class="cd-features-list"> <li>Option 1 Dis</li> <li>Option 1 Wea</li> <li>Option 1 Tra</li> </ul> </div> <div id="content_2" class="inv">Option 2 <ul class="cd-features-list"> <li>Option 2 Dis</li> <li>Option 2 Wea</li> <li>Option 2 Tra</li> </ul> </div> <div id="content_3" class="inv">Option 3 <ul class="cd-features-list"> <li>Option 3 Dis</li> <li>Option 3 Wea</li> <li>Option 3 Tra</li> </ul> </div> <script> document .getElementById('target') .addEventListener('change', function () { 'use strict'; var vis = document.querySelector('.vis'), target = document.getElementById(this.value); if (vis !== null) { vis.className = 'inv'; } if (target !== null ) { target.className = 'vis'; } }); </script> </body> </html>
1 个解决方案
解决方案1
0 2019-02-10 13:20:36
I don't think you need jQuery for this particular issue. 我认为您不需要jQuery来解决此特定问题。 Check out the updated script below. 在下面查看更新的脚本。
<!DOCTYPE html> <html> <head> <title></title> </head> <style> .inv { display: none; } </style> <body> <select id="target"> <option value="">Select...</option> <option value="content_1">Option 1</option> <option value="content_2">Option 2</option> <option value="content_3">Option 3</option> <select> <div id="First Column" class="inv"> <ul class="cd-features-list"> <li>Dis</li> <li>Wea</li> <li>Tra</li> </ul> </div> <div id="content_1" class="inv">Option 1 <ul class="cd-features-list"> <li>Option 1 Dis</li> <li>Option 1 Wea</li> <li>Option 1 Tra</li> </ul> </div> <div id="content_2" class="inv">Option 2 <ul class="cd-features-list"> <li>Option 2 Dis</li> <li>Option 2 Wea</li> <li>Option 2 Tra</li> </ul> </div> <div id="content_3" class="inv">Option 3 <ul class="cd-features-list"> <li>Option 3 Dis</li> <li>Option 3 Wea</li> <li>Option 3 Tra</li> </ul> </div> <script> document .getElementById('target') .addEventListener('change', function () { 'use strict'; // using querySelectorAll to get all matching elements var allVisible = document.querySelectorAll('.vis'), target = document.getElementById(this.value), firstColumn = document.getElementById('First Column'); // iterate through all visible elements instead of just one allVisible.forEach(function(element) { element.className = 'inv'; }); if (target !== null) { target.className = 'vis'; } // show or hide first column depending on whether any option is selected if (firstColumn !== null) { firstColumn.className = this.value ? 'vis' : 'inv'; } }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.