0

我有一个小脚本可以复制下拉列表中的内容。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/

4

2 回答 2

3

id你不应该仅仅为了提供<option>额外的数据而滥用元素的属性。正如另一个答案中所建议的那样，您可以改为指定一个附加属性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...
}
于 2013-01-28T14:29:29.427 回答
2

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

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

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

然后更新您的函数以获取 surname 属性：（建议使用 jQuery）

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

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

于 2013-01-28T14:28:52.773 回答