如何在使用choices库时设置下拉框的默认选项？

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

How can I set the default option of dropdown while using choices library?

问题

我正在使用Choices库来创建下拉菜单。我需要做的是在页面重新加载之前保留下拉菜单的选定值并显示它，然后再提交。目前，我能够使用sessionStorage来存储该值。但是，在页面重新加载后，如何将其显示在choices下拉菜单中作为默认选项呢？我已阅读了文档，但无法弄清如何传递默认值。

  1. document.querySelectorAll('.myDropdown').forEach(selectBox => {
  2.     choicesElements = new Choices(selectBox, { addItemText: ['Yes'], sortFn: (a, b) => a < b });
  3.     selectBox.addEventListener('change', () => {
  4.        // 用于填充choices的代码
  5.     });
  6. });
  8. let marks_dropdown = document.querySelector('.myDropdown');
  9. marks_dropdown.addEventListener("change",function() {
  10.     var choices_item_selectable = document.querySelector('.choices__item.choices__item--selectable');
  11.     storeSelectedItem(choices_item_selectable.innerText);
  12. });
  14. function storeSelectedItem(innertext) {
  15.     sessionStorage.setItem('innertext', innertext);
  16. }
  18. let innertext = sessionStorage.getItem('innertext');
  19. if (innertext) {
  20.     let new_choices_item_selectable = document.querySelector('.choices__item.choices__item--selectable');
  21.     new_choices_item_selectable.innerText = innertext;
  22. }

这是您提供的代码的翻译部分。

英文:

I am using Choices library for dropdown. What I need to do is to retain the selected value of dropdown and show it as soon as the page reloads before submitting. Right now I am able to store the value using sessionStorage. But how can I show it in the choices dropdown as the default option once the page reloads? I read the documentation but not able to figure out how to pass the default value.

  1. document.querySelectorAll(&#39;.myDropdown&#39;).forEach(selectBox =&gt; {
  2.     choicesElements = new Choices(selectBox, { addItemText: [&#39;Yes&#39;], sortFn: (a, b) =&gt; a &lt; b  } );
  3.     selectBox.addEventListener(&#39;change&#39;, () =&gt; {
  4.        // code to populate choices
  5.     }
  6. }
  1. let marks_dropdown = document.querySelector(&#39;.myDropdown&#39;);
  2. marks_dropdown_id.addEventListener(&quot;change&quot;,function() {
  3.     var choices_item_selectable = document.querySelector(&#39;.choices__item.choices__item--selectable&#39;)
  4.     storeSelectedItem(choices_item_selectable.innerText);
  5. }
  7. function storeSelectedItem(innertext) {
  8.     sessionStorage.setItem(&#39;innertext&#39;, innertext);
  9. }
  11. let innertext = sessionStorage.getItem(&#39;innertext&#39;);
  12. if (innertext) {
  13.     let new_choices_item_selectable = document.querySelector(&#39;.choices__item.choices__item--selectable&#39;);
  14.     new_choices_item_selectable.innerText = innertext;
  15. }

答案1

得分: 0

我已经解决了以下问题。

  1. assignChoicesElements = () => {
  2.   document.querySelectorAll('.myDropdown').forEach(selectBox => {
  3.     choicesElements['some-key'] = new Choices(selectBox, { sortFn: (a, b) => a < b });
  4.     selectBox.addEventListener('change', () => {
  5.         let reqdValue = selectBox.value;
  6.         if(reqdValue != '') {
  7.             storeSelectedItem(reqdValue);
  8.         }
  9.     });
  10.     let elementsObject = {};
  11.     document.querySelectorAll('unMarked').forEach(unmarkedElement => { 
  12.        elementsObject['some_key'] = //whatever value to be stored;
  13.     });
  14.     choicesElements['some-key'].clearStore();
  15.     choicesElements['some-key'].setChoices(getPossibleCombinations(elementsObject), 'value', 'label', false);
  16.   });
  17. };
  19. getPossibleCombinations = (jsonObject) => {
  20.   var possibleCombinations = {}
  21.   Object.entries(jsonObject).forEach(([key, value]) => {
  22.     var newPossibleCombinations = possibleCombinations
  23.     Object.entries(possibleCombinations).forEach(([key, value]) => {
  24.       let newValue = value
  25.       newPossibleCombinations['some-value'] = newValue
  26.     })
  27.     newPossibleCombinations['key'] = ['some-value']
  28.     possibleCombinations = newPossibleCombinations
  29.   })
  30.   var formatedPossibleCombinations = []
  31.   Object.entries(possibleCombinations).forEach(([key, value]) => {
  32.    // 这里有变化。获取存储的值，在创建值列表时，如果在sessionStorage中找到该值，则将selected: true添加到该值。
  33.     let sessionStorageValue = sessionStorage.getItem('stored_item')
  34.     if (sessionStorageValue) {
  35.       formatedPossibleCombinations.push({ label: key, value: value, selected: true })
  36.     }
  37.   })
  38.   return formatedPossibleCombinations
  39. }
  41. function storeSelectedItem(value) {
  42.   sessionStorage.clear();
  43.   sessionStorage.setItem('stored_item', value);
  44. }

这段代码超出了问题的要求，但我添加了它以防有人找到它有用。

英文:

I solved the issue as below.

  1. assignChoicesElements = () =&gt; {
  2. document.querySelectorAll(&#39;.myDropdown&#39;).forEach(selectBox =&gt; {
  3. choicesElements[&#39;some-key&#39;] = new Choices(selectBox, { sortFn: (a, b) =&gt; a &lt; b });
  4. selectBox.addEventListener(&#39;change&#39;, () =&gt; {
  5. let reqdValue = selectBox.value;
  6. if(reqdValue != &#39;&#39;) {
  7. storeSelectedItem(reqdValue);
  8. }
  9. });
  10. let elementsObject = {};
  11. document.querySelectorAll(&#39;unMarked&#39;).forEach(unmarkedElement =&gt; { 
  12. elementsObject[&#39;some_key&#39;] = //whatever value to be stored;
  13. });
  14. choicesElements[&#39;some-key&#39;].clearStore();
  15. choicesElements[&#39;some-key&#39;].setChoices(getPossibleCombinations(elementsObject), &#39;value&#39;, &#39;label&#39;, false);
  16. };
  17. getPossibleCombinations = (jsonObject) =&gt; {
  18. var possibleCombinations = {}
  19. Object.entries(jsonObject).forEach(([key, value]) =&gt; {
  20. var newPossibleCombinations = possibleCombinations
  21. Object.entries(possibleCombinations).forEach(([key, value]) =&gt; {
  22. let newValue = value
  23. newPossibleCombinations[&#39;some-value&#39;] = newValue
  24. })
  25. newPossibleCombinations[&#39;key&#39;] = [&#39;some-value&#39;]
  26. possibleCombinations = newPossibleCombinations
  27. })
  28. var formatedPossibleCombinations = []
  29. Object.entries(possibleCombinations).forEach(([key, value]) =&gt; {
  30. // Here is the change. Get the stored value and while creating the list of values, add selected: true to the value if it is found in sessionStorage.
  31. let sessionStorageValue = sessionStorage.getItem(&#39;stored_item&#39;)
  32. if (sessionStorageValue) {
  33. formatedPossibleCombinations.push({ label: key, value: value, selected: true })
  34. }
  35. })
  36. return formatedPossibleCombinations
  37. }
  38. function storeSelectedItem(value) {
  39. sessionStorage.clear();
  40. sessionStorage.setItem(&#39;stored_item&#39;, value);
  41. }

This code is more than required for the question. But I have added it just in case if anyone finds it useful.

huangapple
  • 本文由 发表于 2020年1月6日 18:36:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/59610562.html
  • javascript
匿名

发表评论

匿名网友

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

确定