时间戳

首页 > 解决方案 > 从下拉菜单的多个实例中获取值

javascript - 从下拉菜单的多个实例中获取值

问题描述

我正在做一个小项目，我有一个包含 12 个节点的图表，用户使用下拉菜单为每个节点分配值。因为我不想重复代码，所以我发现了一个用 jquery 编写的循环，它可以根据需要多次克隆下拉菜单。但是，当与 javascript 函数 showData 结合使用以显示所选值时，我收到数组未定义的错误。我怀疑这与 jquery 函数如何将克隆附加到无序列表有关，因为 showData 函数在下拉菜单的一个实例上工作得很好。话虽如此，我不确定如何进行。这是我正在使用的代码。

<!DOCTYPE html>
<html>
<head>


<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>


<body>

<div class = "menu">
<form name="nodeForm">  
<ul>
    <li class="template">Node <span class="qnum">1</span>:
        <select id="select" onchange="showData()">
            <option value="" disabled selected>select a note for this node</option>
            <option val="1">"A"</option>
            <option val="2">"A# / B♭"</option>
            <option val="3">"B"</option>
            <option val="4">"C"</option>
            <option val="5">"C# / D♭"</option>
            <option val="6">"D"</option>
            <option val="7">"D# / E♭"</option>
            <option val="8">"E"</option>
            <option val="9">"F"</option>
            <option val="10">"F# / G♭"</option>
            <option val="11">"G"</option>
            <option val= "12"> "G# / A♭"</option>           
        </select>
    </li>
</ul>
</form>
</div>

<p id="firstP">&nbsp;</p>


<script> 

//jquery for 12 node dropdown
    $(function() {
    var $ul = $("ul"),
        $li = $ul.find("li.template"),
        i;

    for (i=2; i <= 12; i++)
        $li.clone().appendTo($ul).find("span.qnum").text(i);
    var v = $("#select").val(); //trying to get data with jquery 
    console.log(v);
});

//getting the data with js
function showData() 
    {
        var theSelect = nodeForm.select;
        var firstP = document.getElementById('firstP');
        var secondP = theSelect[theSelect.selectedIndex].value;
        var thirdP = theSelect[theSelect.selectedIndex].text;

        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');   
    }


</script>

</body>

</html>

标签： javascriptjqueryhtml

解决方案

问题是在复制模板时，您现在有 12 个选择元素，它们都具有相同的 id，“选择”。所以“theSelect”被设置为一个数组，因此 theSelect.selectedIndex 是未定义的。

在 onchange 事件中，您可以获得受影响的元素，然后使用它：

<select id="select" onchange="showData(event)">

...

function showData(e) 
{
    var index = e.target.selectedIndex;
    firstP.innerHTML = ('This option\'s index number is: ' + index + ' (Javascript index numbers start at 0)');   
}

推荐阅读