如何在输入框中仅显示名称，但在选择元素的下拉列表中显示名称和编号答案

【问题标题】：How to show only name in input box but name and number in dropdown list in select element如何在输入框中仅显示名称，但在选择元素的下拉列表中显示名称和编号
【发布时间】：2016-03-26 19:04:09
【问题描述】：

Html5 选择元素应该：

在下拉列表中显示帐户名称和编号。
如果选择帐户，则框中应仅显示数字
数字应存储在选择值中

我在 Chrome 中尝试了以下代码。选择13111 Receiveables后，输入框显示13111 Receiveables。

如何解决这个问题，以便在选择 13111 Receiveables 后只选择帐户号 13111 显示在字段中？

Bootstrap 3 ,jquery, jquery-ui, ASP.NET MVC4 with Razor view engine 都使用了。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    Account number:
    <select>
        <option label='' value=''></option>
        <option value='13111' label='13111 Receiveables'>13111</option>
    </select>
</body>
</html>

【问题讨论】：

标签： javascript html twitter-bootstrap html-select

【解决方案1】：

我修改了@arsho 的代码

我相信您正在寻找这个：

HTML：

<body>
  <br> Account number:
  <select id="account_select">
        <option id="optId" label='' value=''></option>
        <option value='13111' label='13111 Receiveables'>13111</option>
    <option value='13112' label='13112 Receiveables'>13112</option>
    <option value='13113' label='13113 Rssseceiveables'>13113</option>
    </select>
</body>

JS：

$(document).ready(function() {
  $("#account_select").on("change", function() {
    $this_value = $(this).val();

    $("#optId").text($this_value);
    $("#optId").attr("selected",true);


  });

});

希望对你有帮助……

【讨论】：

【解决方案2】：

将 HTML 更改为：

    <body>
      <input placeholder="Account number will be shown upon selection" type="text" id="account_number" />
      <br> Account number:
      <select id="account_select">
          <option label='' value=''></option>
          <option value='13111' label='13111 Receiveables'>13111</option>
      </select>
    </body>

在jQuery中添加如下sn-p：

    $(document).ready(function() {
      $("#account_select").on("change", function() {
        $this_value = $(this).val();
        $("#account_number").val($this_value);
      });
    });

查看实时编码笔http://codepen.io/arsho/pen/GZErBL

【讨论】：

这需要单独的字段用于数据输入和数据显示。屏幕很小，有很多这样的选择元素。数据输入的元素数量不能重复。如何使用单个字段，最好不使用 javascript？