javascript - 使用单个输入来设置 jQuery 中几个不同选项的值的方法

Question

我会解释我的问题。

我有一个包含多个选项和一个（或多个）输入的选择。我希望这个（这些）输入用于为我的选项提供额外的价值。

因此，我希望通过单个输入为每个选项提供一个附加值，并将其保存在内存中（没有数据库 ^^）。

你明白吗 ？？任何想法 ？泰！

编辑 ：

例如 ：

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<input type="text" />

我选择了选项 1，并在我的输入中设置了“ok”。

我选择了选项 3，并在我的输入“测试”中进行了设置。

如果我重新选择选项 1，我发现我的价值“ok”。

编辑 2：输入将是我的选项的一种配置。每个选项可以有 1 个或多个输入。如果我有 80 个选项，一个输入可以有 80 个不同的值。

Answer 1

使用此版本，您可以更改输入的值并将其保存。

您可以使用 data- 属性：

例子

<select id="select">
  <option value="test1">1</option>
  <option value="test2">2</option>
  <option value="test3">3</option>
</select>
<input id="textinput" type="text" />​​​​​​​​​​​​​​​​​​​

<script>
$('#select').change(function(){
    $('#textinput').val($(this).find('option:selected').val());
});
$('#textinput').keyup(function(){
    $('#select option:selected').val(this.value);
});
</script>

Answer 2

<select>
  <option text="ok">1</option>
  <option text="hello">2</option>
  <option text="test">3</option>
</select>
<input type="text" />

$(function(){
  $('select').on('change', function(){
    $('input').val($('option:selected', this).attr('text'));
  });
});

这是一个有效的 JSFiddle

Answer 3

我相信您想使用选项的valueorlabel属性，请在Mozilla 开发人员网络文档<select>和MDN 文档中<option>查看更多详细信息。

有关其使用示例，请参阅使用 JavaScript 获取选项文本/值。