在多選下拉列表中獲取選定值並將它們插入 JSON

Question

我有輸入為這樣的書插入數據

 <div class="form-group"> <label for="Id">Id</label> <input type="text" class="form-control" id="Id" placeholder="Id" required> </div> <div class="form-group"> <label for="Title">Titre du livre</label> <input type="text" class="form-control" id="Title" placeholder="Titre du livre" required> </div> <div class="form-group"> <label for="Contenu">Contenu</label> <textarea class="form-control" id="Contenu" rows="5" required></textarea> </div> <div class="form-group"> <label for="Prix">Prix</label> <input type="text" class="form-control" id="Prix" placeholder="Prix" required> </div> <select multiple="" class="form-control" id="selectGenre" required=""> <option value="">Choisissez un genre</option> <option value="1">Roman</option><option value="2">Biographie</option><option value="3">Comédie</option><option value="4">Encyclique</option><option value="5">Médicale</option><option value="6">Science</option><option value="7">Culture</option><option value="8">Politique</option></select>

一本書有一個ID /標題/內容/價格，它可以有一個或幾個流派

我恢復每個值以將其插入 JSON 以啟動 POST 請求。

JSON 只有一種流派的書示例

{"Id":1,"Title":"FluconazoleE","Contenu":"nonummy ultricies ...","Prix":19,"Genre":[{"Id":6,"Nom":"Science"}]}

JSON 具有多種類型的書籍示例

{"Id":1500,"Title":"FluconazoleE","Contenu":"nsenectus et ...","Prix":19,"Genre":[{"Id":6,"Nom":"Science"},{"Id":2,"Nom":"Biographie"}]}

我的 function 發送 POST 請求

function addItem() {

const addIdTextbox = document.getElementById('Id');
const addTitleTextbox = document.getElementById('Title');
const addContenuTextbox = document.getElementById('Contenu');
const addPrixTextbox = document.getElementById('Prix');
const addGenreTextbox = document.getElementById('selectGenre');

const item = {

    id: Number(addIdTextbox.value.trim()),
    title: addTitleTextbox.value.trim(),
    contenu: addContenuTextbox.value.trim(),
    prix: Number(addPrixTextbox.value.trim()),
    Genre: [{ "Id": Number(addGenreTextbox.value.trim()), "Nom": addGenreTextbox.options[addGenreTextbox.selectedIndex].text.trim() }]
};

fetch(uriBook, {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(item)
})
    .then(response => response.json())
    .then(() => {
        getItems();
        addNameTextbox.value = '';
    })
    .catch(error => console.error('Unable to add item.', error));

    alert('Votre livre a bien ete ajoute !');
    window.location.href = 'liste-livres.html';

}

問題是在流派中發送多個選擇，我可以用這段代碼檢索它們

const addGenreTextbox = document.getElementById('selectGenre');

var idGenre = [];
var nomGenre = [];
for (var option of addGenreTextbox.options) {
    if (option.selected) {
        idGenre.push(addGenreTextbox.value.trim());
        nomGenre.push(option[addGenreTextbox.selectedIndex].text.trim());
    }
}

但我的問題是如何處理表格以將它們插入到const item中以擁有 JSON 的一本書的一種或多種類型

Answer 1

因此，您已成功從輸入元素中獲取值，因此我們將首先修改您的代碼以檢索它們：

const addGenreTextbox = document.getElementById('selectGenre');

let result = {};
for (var option of addGenreTextbox.options) {
    if (option.selected) {
        result[id] = addGenreTextbox.value.trim();
        result[Nom] = option[addGenreTextBox.selectedIndex].text.trim();
    }
}

item.Genre.push(result);

那應該對你有用。 如果您有任何問題或我遺漏了什么，請告訴我。

Answer 2

這是正確的解決方案：

const addGenreTextbox = document.getElementById('selectGenre');

let GenreChoix = []
for (var i = 0; i < addGenreTextbox.options.length; i++) {
    if (addGenreTextbox.options[i].selected) {
        let result = {};
        result["id"] = addGenreTextbox.options[i].value;
        result["Nom"] = addGenreTextbox.options[i].text.trim();
        GenreChoix.push(result);
    }
}