javascript - 如何连接输入和选择选项？

Question

我有这样的输入：

<input name="men" id="men" type="text" size="10" maxlength="2"/>

并选择

<select id="menlist" name="menlist">
  <option value="1">Sausis</option>
  <option value="2">Vasaris</option>
  <option value="3">Kovas</option>
  <option value="4">Balandis</option>
</select>

我如何连接input id men和select id menlist使用 javascrip？例如：如果用户写入输入字段 2 -> 选择选项值更改为 2；

Answer 1

在文本框 keyup 事件中调用一个函数，该函数将 menlist 的选定值设置为输入的值。

<input name="men" id="men" onkeyUp="func1()" type="text" size="10" maxlength="2"/>

function func1()
{
var txtval = parseInt(document.getElementById("men").value);
document.getElementById("menlist").selectedIndex= txtval;
}

Answer 2

<script>
function change_select(val)
{
  document.getElementById('menlist').selectedIndex = val;
}
</script>

Answer 3

从您的问题中不清楚是否可以使用 jQuery。如果是，那么你可以做

$(function(){
    $("#men").keyup(function(){
        var value=$(this).val();
        $("#menlist option[selected]").removeAttr("selected");
        $("#menlist option[value=" + value + "]").attr("selected", "selected");
    });
    $("#menlist").change(function(){
        $("#men").val($(this).val());
    });
});

这是一个jsFiddle

这样，您可以按任何顺序为选项设置任何值。只要确保它们是独一无二的。例如，您可以在选择中对名称进行排序。

更新添加了一个处理程序以在选择更改时更改输入值。