创建具有多选功能的下拉菜单，使用JS。

huangapple
go评论94阅读模式
英文:

create dropdown with multiple selection in JS

问题

我想要实现一个下拉菜单，类似于Booking.com的功能（我附上了一个截图），但我遇到了一些问题，无法确定出错在哪里。您有什么建议吗？

HTML

  1. <div class="dropdown">
  2.     <input type="text" id="droptxt" class="list" readonly placeholder="Number of guests">
  3.     <div id="content" class="content">
  4.         <div class="list">
  5.             <input type="checkbox" id="rooms" class="list" value="Choose how many rooms" />
  6.             <label for="Choose how many rooms" class="list">Choose how many rooms </label>
  7.             <input type="hidden" class="list quantity" min="1" value="1" />
  8.         </div>
  9.         <div class="list">
  10.             <input type="checkbox" id="adults" class="list" value="Choose the number of adults" />
  11.             <label for="Choose the number of adults" class="list">Choose the number of adults </label>
  12.             <input type="hidden" class="list quantity" min="1" value="1" />
  13.         </div>
  14.         <div class="list">
  15.             <input type="checkbox" id="children" class="list" value="Choose the number of children" />
  16.             <label for="Choose the number of children" class="list">Choose the number of children </label>
  17.             <input type="hidden" class="list quantity" min="1" value="1" />
  18.         </div>
  19.     </div>
  20. </div>

JavaScript

  1. const txt = document.getElementById('droptxt');
  2. console.log(txt);
  3. const content = document.getElementById('content');
  4. console.log(content);
  5. const checkboxes = document.querySelectorAll('.list input[type="checkbox"]');
  6. const quantity = document.querySelectorAll('.list input[type="number"]');
  8. txt.addEventListener('click', function() {
  9.     content.classList.toggle('show');
  10. });
  12. // Close the dropdown if the user clicks outside of it
  13. window.onclick = function(e) {
  14.     if (!e.target.matches('.list')) {
  15.         if (content.classList.contains('show')) content.classList.remove('show');
  16.     }
  17. };
  19. checkboxes.forEach(function(checkbox, index) {
  20.     checkbox.addEventListener('click', function() {
  21.         quantity[index].type = (checkbox.checked) ? 'number' : 'hidden';
  22.         calc();
  23.     });
  24. });
  26. quantity.forEach(function(input) {
  27.     input.addEventListener('input', calc);
  28. });
  30. function calc() {
  31.     let arr = [];
  32.     for (let i = 0; i < checkboxes.length; i++) {
  33.         if (checkboxes[i].checked) {
  34.             arr.push(quantity[i].value + ' x ' + checkboxes[i].value);
  35.         }
  36.     }
  38.     txt.value = arr.join(', ');
  39. }

请注意，这是提供的代码和文本的翻译。如果您需要进一步的帮助或解释，请随时提出。

英文:

I want to implement a dropdown similar to the one on Booking.com in terms of functionality (I attach a screenshot), but I am encountering some issues and I can't figure out where I'm going wrong. Do you have any suggestions?
创建具有多选功能的下拉菜单，使用JS。

HTML

  1.                                 &lt;div class=&quot;dropdown&quot;&gt;
  2.                                 &lt;input type=&quot;text&quot; id=&quot;droptxt&quot; class=&quot;list&quot; readonly placeholder=&quot;Number of guests&quot;&gt;
  3.                                 &lt;div id=&quot;content&quot; class=&quot;content&quot;&gt;
  4.                                     &lt;div class=&quot;list&quot;&gt;
  5.                                         &lt;input type=&quot;checkbox&quot; id=&quot;rooms&quot; class=&quot;list&quot; value=&quot;Choose how many rooms&quot; /&gt;
  6.                                         &lt;label for=&quot;Choose how many rooms&quot; class=&quot;list&quot;&gt;Choose how many rooms &lt;/label&gt;
  7.                                         &lt;input type=&quot;hidden&quot; class=&quot;list quantity&quot; min=&quot;1&quot; value=&quot;1&quot; /&gt;
  8.                                     &lt;/div&gt;
  9.                                     &lt;div class=&quot;list&quot;&gt;
  10.                                         &lt;input type=&quot;checkbox&quot; id=&quot;adults&quot; class=&quot;list&quot; value=&quot;Choose the number of adults&quot; /&gt;
  11.                                         &lt;label for=&quot;Choose the number of adults&quot; class=&quot;list&quot;&gt;Choose the number of adults &lt;/label&gt;
  12.                                         &lt;input type=&quot;hidden&quot; class=&quot;list quantity&quot; min=&quot;1&quot; value=&quot;1&quot; /&gt;
  13.                                     &lt;/div&gt;
  14.                                     &lt;div class=&quot;list&quot;&gt;
  15.                                         &lt;input type=&quot;checkbox&quot; id=&quot;children&quot; class=&quot;list&quot; value=&quot;Choose the number of children&quot; /&gt;
  16.                                         &lt;label for=&quot;Choose the number of children&quot; class=&quot;list&quot;&gt;Choose the number of children &lt;/label&gt;
  17.                                         &lt;input type=&quot;hidden&quot; class=&quot;list quantity&quot; min=&quot;1&quot; value=&quot;1&quot; /&gt;
  18.                                     &lt;/div&gt;
  19.                                 &lt;/div&gt;
  20.                             &lt;/div&gt;

JavaScript

  1. const txt = document.getElementById(&#39;droptxt&#39;);
  2. console.log(txt);
  3. const content = document.getElementById(&#39;content&#39;);
  4. console.log(content);
  5. const checkboxes = document.querySelectorAll(&#39;.list input[type=&quot;checkbox&quot;]&#39;);
  6. const quantity = document.querySelectorAll(&#39;.list input[type=&quot;number&quot;]&#39;);
  8. txt.addEventListener(&#39;click&#39;, function() {
  9.     content.classList.toggle(&#39;show&#39;);
  10. });
  12. // Close the dropdown if the user clicks outside of it
  13. window.onclick = function(e) {
  14.     if (!e.target.matches(&#39;.list&#39;)) {
  15.         if (content.classList.contains(&#39;show&#39;)) content.classList.remove(&#39;show&#39;);
  16.     }
  17. };
  19. checkboxes.forEach(function(checkbox, index) {
  20.     checkbox.addEventListener(&#39;click&#39;, function() {
  21.         quantity[index].type = (checkbox.checked) ? &#39;number&#39; : &#39;hidden&#39;;
  22.         calc();
  23.     });
  24. });
  26. quantity.forEach(function(input) {
  27.     input.addEventListener(&#39;input&#39;, calc);
  28. });
  30. function calc() {
  31.     let arr = [];
  32.     for (let i = 0; i &lt; checkboxes.length; i++) {
  33.         if (checkboxes[i].checked) {
  34.             arr.push(quantity[i].value + &#39; x &#39; + checkboxes[i].value);
  35.         }
  36.     }
  38.     txt.value = arr.join(&#39;, &#39;);
  39. }

答案1

得分: 0

在这一行中，你选择了input[type=&quot;number&quot;]，但在你的HTML中没有类型为"number"的输入。使用这个代码来解决问题：

  1. const quantity = document.querySelectorAll('.list input[type="hidden"]');

这将解决你的问题。

英文: 
  1.  const quantity = document.querySelectorAll(&#39;.list input[type=&quot;number&quot;]&#39;);

in this line you are selecting input[type="number"] but in your html there is no input which type is number. use this

  1.  const quantity = document.querySelectorAll(&#39;.list input[type=&quot;hidden&quot;]&#39;);

it will solve your problem

huangapple
  • 本文由 发表于 2023年2月18日 01:03:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/75487239.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定