javascript - 通过所选选项属性设置表单输入属性

Question

我的目标是将选择字段中选项的值和属性添加到输入元素。

这些选项是动态生成的 - 如果这有助于找到解决方案，那么我可以为每个选项提供一个唯一的 ID。

我有以下代码(here's my fiddle):

HTML

<select size="3" width="220" style="width:220px" id="select_trainer" multiple="yes"> 
    <option value="1" name="unique-code-1" id="unique-id-1">Jillian</option>
    <option value="2" name="unique-code-2" id="unique-id-2">James</option>
    <option value="3" name="unique-code-3" id="unique-id-3">Jean</option>
</select>
<input value="" name="" id="save_select_profile" checked="checked"/>

JavaScript

document.getElementById('select_trainer').onchange = function () {
    document.getElementById('save_select_profile').value = event.target.value;
    document.getElementById('save_select_profile').setAttribute('name', event.target.name);
}       

javascript(来自 here 和 here )在设置输入字段的值以匹配所选选项方面做得很好。

但是我的补充 - document.getElementById('save_select_profile').setAttribute('name', event.target.name); - 不将选定选项名称属性设置为输入。

我发现如果<select>元素有 name值集，该值被添加到输入中。

如何将选定的子元素名称值传递给 input领域？

Answer 1

<强> Updated Fiddle

尝试使用 selectedIndex 通过索引定位所选选项，然后使用 getAttribute 函数获取属性名称。

document.getElementById('select_trainer').onchange = function () {
  var my_select = event.target;
  var option_name = my_select.options[my_select.selectedIndex].getAttribute('name');

  document.getElementById('save_select_profile').value = my_select.value;
  document.getElementById('save_select_profile').setAttribute('name', option_name);
}   

希望这有帮助。

<小时/>

代码片段

document.getElementById('select_trainer').onchange = function () {
  var my_select = event.target;
  var option_name = my_select.options[my_select.selectedIndex].getAttribute('name');

  document.getElementById('save_select_profile').value = my_select.value;
  document.getElementById('save_select_profile').setAttribute('name', option_name);
  
  document.getElementById('test').value = document.getElementById('save_select_profile').getAttribute('name');
}					

<select name='55' size="3" width="220" style="width:220px" id="select_trainer" multiple="yes"> 

<option value="1" name="unique-code-1" id="unique-id-1">Jillian</option>
<option value="2" name="unique-code-2" id="unique-id-2">Jillian</option>
<option value="3" name="unique-code-3" id="unique-id-3">Jillian</option>

</select>
<br>				
<input value="" name="null" id="save_select_profile" checked="checked"/>
<br>
<input type='text' id="test"/>