英文:
How can I set the default option of dropdown while using choices library?
问题
我正在使用Choices库来创建下拉菜单。我需要做的是在页面重新加载之前保留下拉菜单的选定值并显示它，然后再提交。目前，我能够使用sessionStorage来存储该值。但是，在页面重新加载后，如何将其显示在choices下拉菜单中作为默认选项呢？我已阅读了文档，但无法弄清如何传递默认值。
document.querySelectorAll('.myDropdown').forEach(selectBox => {
choicesElements = new Choices(selectBox, { addItemText: ['Yes'], sortFn: (a, b) => a < b });
selectBox.addEventListener('change', () => {
// 用于填充choices的代码
});
});
let marks_dropdown = document.querySelector('.myDropdown');
marks_dropdown.addEventListener("change",function() {
var choices_item_selectable = document.querySelector('.choices__item.choices__item--selectable');
storeSelectedItem(choices_item_selectable.innerText);
});
function storeSelectedItem(innertext) {
sessionStorage.setItem('innertext', innertext);
}
let innertext = sessionStorage.getItem('innertext');
if (innertext) {
let new_choices_item_selectable = document.querySelector('.choices__item.choices__item--selectable');
new_choices_item_selectable.innerText = innertext;
}
这是您提供的代码的翻译部分。
英文:
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.
document.querySelectorAll('.myDropdown').forEach(selectBox => {
choicesElements = new Choices(selectBox, { addItemText: ['Yes'], sortFn: (a, b) => a < b } );
selectBox.addEventListener('change', () => {
// code to populate choices
}
}
let marks_dropdown = document.querySelector('.myDropdown');
marks_dropdown_id.addEventListener("change",function() {
var choices_item_selectable = document.querySelector('.choices__item.choices__item--selectable')
storeSelectedItem(choices_item_selectable.innerText);
}
function storeSelectedItem(innertext) {
sessionStorage.setItem('innertext', innertext);
}
let innertext = sessionStorage.getItem('innertext');
if (innertext) {
let new_choices_item_selectable = document.querySelector('.choices__item.choices__item--selectable');
new_choices_item_selectable.innerText = innertext;
}
答案1
得分: 0
我已经解决了以下问题。
assignChoicesElements = () => {
document.querySelectorAll('.myDropdown').forEach(selectBox => {
choicesElements['some-key'] = new Choices(selectBox, { sortFn: (a, b) => a < b });
selectBox.addEventListener('change', () => {
let reqdValue = selectBox.value;
if(reqdValue != '') {
storeSelectedItem(reqdValue);
}
});
let elementsObject = {};
document.querySelectorAll('unMarked').forEach(unmarkedElement => {
elementsObject['some_key'] = //whatever value to be stored;
});
choicesElements['some-key'].clearStore();
choicesElements['some-key'].setChoices(getPossibleCombinations(elementsObject), 'value', 'label', false);
});
};
getPossibleCombinations = (jsonObject) => {
var possibleCombinations = {}
Object.entries(jsonObject).forEach(([key, value]) => {
var newPossibleCombinations = possibleCombinations
Object.entries(possibleCombinations).forEach(([key, value]) => {
let newValue = value
newPossibleCombinations['some-value'] = newValue
})
newPossibleCombinations['key'] = ['some-value']
possibleCombinations = newPossibleCombinations
})
var formatedPossibleCombinations = []
Object.entries(possibleCombinations).forEach(([key, value]) => {
// 这里有变化。获取存储的值，在创建值列表时，如果在sessionStorage中找到该值，则将selected: true添加到该值。
let sessionStorageValue = sessionStorage.getItem('stored_item')
if (sessionStorageValue) {
formatedPossibleCombinations.push({ label: key, value: value, selected: true })
}
})
return formatedPossibleCombinations
}
function storeSelectedItem(value) {
sessionStorage.clear();
sessionStorage.setItem('stored_item', value);
}
这段代码超出了问题的要求，但我添加了它以防有人找到它有用。
英文:
I solved the issue as below.
assignChoicesElements = () => {
document.querySelectorAll('.myDropdown').forEach(selectBox => {
choicesElements['some-key'] = new Choices(selectBox, { sortFn: (a, b) => a < b });
selectBox.addEventListener('change', () => {
let reqdValue = selectBox.value;
if(reqdValue != '') {
storeSelectedItem(reqdValue);
}
});
let elementsObject = {};
document.querySelectorAll('unMarked').forEach(unmarkedElement => {
elementsObject['some_key'] = //whatever value to be stored;
});
choicesElements['some-key'].clearStore();
choicesElements['some-key'].setChoices(getPossibleCombinations(elementsObject), 'value', 'label', false);
};
getPossibleCombinations = (jsonObject) => {
var possibleCombinations = {}
Object.entries(jsonObject).forEach(([key, value]) => {
var newPossibleCombinations = possibleCombinations
Object.entries(possibleCombinations).forEach(([key, value]) => {
let newValue = value
newPossibleCombinations['some-value'] = newValue
})
newPossibleCombinations['key'] = ['some-value']
possibleCombinations = newPossibleCombinations
})
var formatedPossibleCombinations = []
Object.entries(possibleCombinations).forEach(([key, value]) => {
// 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.
let sessionStorageValue = sessionStorage.getItem('stored_item')
if (sessionStorageValue) {
formatedPossibleCombinations.push({ label: key, value: value, selected: true })
}
})
return formatedPossibleCombinations
}
function storeSelectedItem(value) {
sessionStorage.clear();
sessionStorage.setItem('stored_item', value);
}
This code is more than required for the question. But I have added it just in case if anyone finds it useful.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论