html select-JavaScript将值optgroup复制到其他输入

html select - JavaScript copy value optgroup to other input

本文关键字：其他 输入 复制 optgroup select-JavaScript 将值 html      更新时间：2023-09-26

我选择了选项：

<form>
<select name="sel" id="sel" onchange="run()">
<option selected disabled>Wybierz...</option>
  <optgroup id="user" value="user" label="user">
    <option value="1">michal</option>
    <option value="2">mateusz</option>
  </optgroup>
  <optgroup id="warehouse" value="warehouse" label="warehouse">
    <option value="1">kosz</option>
    <option value="2">zaginione</option>
  </optgroup>
</select>
</form>

<input type="text" name="copy" id="copy"></input>

以及在输入文本中添加文本的脚本：

function run() {
    if(document.getElementById("user").label == 'user'){
      document.getElementById("copy").value = "user";
    } else if (document.getElementById("warehouse").label == 'warehouse') {
        document.getElementById("copy").value = "warehouse";
    }
}

当用户选择第一个选项optgroup（"用户"），然后在输入文本脚本中添加名称"用户"。当用户从第二个optgroup中选择记录时，脚本将输入文本中的文本更改为"仓库"。但在我的脚本中，没有向输入文本添加任何内容。演示

演示

在jsfiddle中，您将函数放在onload函数中，因此它不被定义为外部范围。否则，您将获得两组的userdocument.getElementById("user").label == 'user'总是真的。所以它不会去其他块。你应该得到所选组的标签值并进行比较。

var lable=event.target.options[event.target.selectedIndex].parentNode.label // get lable value of clicked group
if(lable == 'user'){
  document.getElementById("copy").value = "user";
} else if (lable == 'warehouse') {
    document.getElementById("copy").value = "warehouse";
}
相关文章：