时间戳

首页 > 解决方案 > 1 未定义，选择标签中的 optgroup

javascript - 1 未定义，选择标签中的 optgroup

问题描述

所以我正在使用 select2，在我使用 optgroups 之前一切正常。当我将 id “drink” 放在 select 标记中时，该脚本工作正常，但当我将 id “drink” 放在 optgroup 标记中时，脚本就不行了。有谁知道这个问题，我不明白为什么它不起作用。

html:

    <select class="drink" name="drink" style="width: 25%">
        <optgroup label="Bieren" id="drink"></optgroup>
        <optgroup label="Sterke Bieren"></optgroup>
    </select>
    <button type="button" onclick="collectInformation()" class="button-main">Submit</button>

    <script>
        //drinkData
        var drinkData = [
            ["Cara Pils(4,4%)", 0.044],
            ["Corona Extra(4,6%)", 0.046],
            ["Cristal(5%)", 0.05],
            ["Jupiler(5,2%)", 0.052],
            ["Maes(5,2%)", 0.052],
            ["Stella Artois(5,2%)", 0.052],
            ["Strongbow(4,5%)", 0.045]
        ];
        for (i = 0; i < drinkData.length; i++) {
            document.getElementById("drink").innerHTML += "<option value='" + drinkData[i][0] + "'>" + drinkData[i][0] + "</option>";
        }

js：

function collectInformation() {
    
    //drink
    var retu;
    for (i = 0; i < drinkData.length; i++) {
        if (drinkData[i][0] == document.getElementById("drink").value) {
            retu = i;
        }
    }
    var drink = drinkData[retu][1];

jQuery：

$(document).ready(function() {
    $('.drink').select2();
});

我正在使用 select2（jQuery 插件），在我的选择选项中有一个搜索栏。我试图尽可能地过滤我的代码。我的脚本的 js 部分出现错误。它说 1 未定义。我检查了所有mmy id，似乎没有错？有没有人看到问题？

标签： javascripthtmljquery

解决方案

您的问题在这一行：

document.getElementById("drink").value

将其更改为：

document.querySelector(".drink").value

或在 jQuery 中：

$(".drink").val()

饮料是一个类而不是一个ID。

var drinkData = [
    ["Cara Pils(4,4%)", 0.044],
    ["Corona Extra(4,6%)", 0.046],
    ["Cristal(5%)", 0.05],
    ["Jupiler(5,2%)", 0.052],
    ["Maes(5,2%)", 0.052],
    ["Stella Artois(5,2%)", 0.052],
    ["Strongbow(4,5%)", 0.045]
];
function collectInformation() {
    //drink
    var retu;
    for (i = 0; i < drinkData.length; i++) {
        if (drinkData[i][0] == document.querySelector(".drink").value) {
            retu = i;
        }
    }
    var drink = drinkData[retu][1];
    console.log(drink);
}

$('.drink').select2();


for (i = 0; i < drinkData.length; i++) {
    document.getElementById("drink").innerHTML += "<option value='" + drinkData[i][0] + "'>" + drinkData[i][0] + "</option>";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>


<select class="drink" name="drink" style="width: 25%">
    <optgroup label="Bieren" id="drink"></optgroup>
    <optgroup label="Sterke Bieren"></optgroup>
</select>
<button type="button" onclick="collectInformation()" class="button-main">Submit</button>

推荐阅读