通过选定的选项属性设置表单输入属性

Question

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

这些选项是动态生成的--如果给每个人一个唯一的ID，这将是可行的，如果这将有助于预测一个解决方案。

我有以下代码( 这是我的小提琴 )：

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 (来自这里和这里)在设置输入字段的值以匹配所选选项方面做得很好。

但是我的添加-- document.getElementById('save_select_profile').setAttribute('name', event.target.name); --没有将选中的选项名称属性设置为输入。

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

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

Answer 1

event.target将返回整个select元素，而不是嵌套选项标记，后者存储您试图设置的名称。要获得所选选项，您需要执行以下操作：

event.target.options[event.target.selectedIndex]

然后，要获得所选选项的名称，请执行以下操作：

event.target.options[event.target.selectedIndex].getAttribute('name');

然后设置名称，以及使用setAttribute函数进行命名的方式。

这是一个工作的CodePen

Answer 2

更新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"/>

​