Question

我正在开发一个小项目，我有一个包含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>

Answer 1

问题在于，在复制模板时，您现在有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)');   
}

Answer 2

也许是这样的：

HTML：

<ul></ul>

的javascript：

let html = '';

for (let i = 1; i <= 12; ++i) {
  html+= `
  <li>Node <span class="qnum">${i}</span>:
    <select>
      <option>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>
    <span>(index selected is <span class="selected">0</span>)</span>
  </li>`;
  }

  $('ul').append(html);

  $('select').on('change', function() {
     $(`span.selected:eq(${$('select').index(this)})`).text(this.options.selectedIndex)
  });

https://jsfiddle.net/47bcvvn2/2/

.clone()往往会遇到奇怪的问题。相反，这会生成整个html，然后将其添加到DOM。

$('select').index(this) - 这将根据所有可用选项返回已更改的选择的索引。如果你想缩小它并且能够在其他地方使用其他选择，你可以给出一个选择一个类的集合。

this.options.selectedIndex - 这将返回所选选项的索引，无论选择哪个选项。以来 this是触发change事件的选择。

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

2 个答案: