如何在 Javascript 中指定要复制的内容

Question

我有一个小脚本可以复制下拉菜单中的内容。 But I want the drop to display the firstname and when the firstname is selected I want it to copy the lastname outside.我需要使用VALUE以外的属性

JS：

function copy() {
    document.getElementById("label").innerHTML = 
        document.getElementById("mySelect").value
}

HTML：

<div id="label"></div>

<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
    <option value="firstname" id="lastname">Firstname</option>
    <option value="firstname" id="lastname">Firstname</option>
    <option value="firstname" id="lastname">Firstname</option>
    <option value="firstname" id="lastname">Firstname</option>
</select>

或看这里http://jsfiddle.net/r6Fus/

Answer 1

您不应仅仅为了向<option> 提供额外数据而滥用元素的id 属性。 正如another answer 中所建议的那样，您可以改为指定一个附加属性，例如data-lastname，然后在您的脚本中访问该属性（以下代码未经测试）。

您的 HTML 可能如下所示：

<select id="mySelect" onchange="copy();">
<option value="">Select a person:</option>
    <option value="firstname" data-lastname="lastname">Firstname</option>
    <option value="firstname" data-lastname="lastname">Firstname</option>
    <option value="firstname" data-lastname="lastname">Firstname</option>
    <option value="firstname" data-lastname="lastname">Firstname</option>
</select>

您的 JS 函数可能如下所示：

function copy() {
  var sel = document.getElementById('mySelect');
  var selected = sel.options[sel.selectedIndex];
  var firstname = selected.value;
  var lastname = selected.getAttribute('data-lastname');
  // do stuff...
}

Answer 2

为每个<option>添加一个data-surname属性：

<option value="tcs" data-surname="Washington" >tcs</option>

（您可以使用 ID 执行此操作，但在这种情况下，数据属性似乎是更好的解决方案）

然后更新你的函数来获取姓氏属性：（推荐使用jQuery）

function copy( {
  $("#label").html($("#mySelect option:selected").data("surname"))
}

工作示例（尝试菜单中的第一个选项）-jsFiddle