如何在 select 元素的输入框中只显示名称，但在下拉列表中显示名称和数字

Question

Html5 select 元素应该：

在下拉列表中显示帐户名称和号码。
如果帐户是 selected，则只有数字应该显示在框中
数字应存储在 selection

我在 Chrome 中尝试了下面的代码。 select输入13111 Receiveables后，输入框显示13111 Receiveables。

如何解决这个问题，以便在 selecting 13111 Receiveables 之后只有帐号 13111 显示在字段中 ?

Bootstrap 3 ,jquery, jquery-ui, ASP.NET 使用带 Razor 视图引擎的 MVC4。

<!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>

Answer 1

将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 中添加以下代码段：

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

在 live codedpen 中查看 http://codepen.io/arsho/pen/GZErBL

Answer 2

我修改了@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);


  });

});

希望对您有所帮助...

如何在 select 元素的输入框中只显示名称，但在下拉列表中显示名称和数字

How to show only name in input box but name and number in dropdown list in select element

javascript

html

twitter-bootstrap

html-select