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

Answer 2

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

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

然后，为了获得所选选项的名称，您可以：

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

然后设置名称，使用setAttribute函数设置名称。

Here is a working CodePen

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

2 个答案:

段