在HTML中使用jQuery选择何时打开，何时不打开

我试图使用HTML的select标记和JavaScript/jQuery的click和“select change”事件处理程序来实现poor man的两列实现

目标很容易，但实现却不容易

所以，情况是这样的

用户单击一个空的selecthtml组件，然后从服务器获取数据。 当用户想要从select标记中的数据项中进行选择时，他单击SELECTHTML组件 选择html组件打开，它显示读取的行，它包含来自两个数组的数据：数字标识符，一个像“-”这样的短拆分器，然后是数字标识符的描述，它是文本 当SelectHTML标记打开时，用户可以使用鼠标单击或enter键选择一行。当select打开时，所有行都类似于“12321213这是说明” e在用户选择了他想要的行后，选择标记的打开列表被关闭，选择标记的输入字段中应该只有像“12321213”这样的数字标识符，行的其余部分被剥离。 f当用户从select标记中选择“12321213”并将其打开时，应在选择阶段显示整行，如“12321213这是说明” 我尝试使用JavaScript/jQuery和两个数组来解决这个问题，这两个数组包含相同的数据和两个字段编号标识符和描述。第二个阵列是一个要恢复的存储器，当需要显示字段编号和描述时，它包含字段编号和描述

我的代码如下：任务列表是选择选项列表

("#TaskList").click(function (event) {

    var index = $('#TaskList option:selected').val();
    console.log(' click ' + disableOptions);
    if (disableOptions === true) {  // This fetch data using ajax from serverside
        disableOptions = false;
        $("#TaskList option").remove();
        $('#TaskList').attr("disabled", "disabled");

        $('<input />').attr('type', 'hidden')
                      .attr('name', 'GETTASKS')
                      .attr('value', 'GETTASKS')
                      .appendTo('#workForm');
        $('#workForm').submit();
    }
    else {  // This restores whole row from second array containing number and description
        $("#TaskList").html($("#CombinedLists").html());
        $("#TaskList option[value='" + index + "']").attr('selected', 'selected');
    }
});

$(function () {
    $('select').on('change', function (e) {
         console.log(' select on change ');
          // Getting selected index of select option list
          var index = $('#TaskList option:selected').val();
          // Getting text of selected row
          var row = $("#TaskList option[value='" + index + "']").text();
          // If row contains ' ---' if means option window is closed and only number shown
          if (row.indexOf(' ---') > -1) {
              longText = false;
              row = row.substring(0, row.indexOf(' '));
              $('#TaskList option:selected').text(row);
          }
          else { // Option windows is opened and both number and description is shown
              longText = true;
              row = $("#CombinedLists option[value='" + index + "']").text();
              $("#TaskList option[value='" + index + "']").text(row);
          }
      })
      .change();
});

所以，问题似乎是单击事件和情况，其中编号或/和描述显示在打开的选择选项列表中。正如我提到的，当选项窗口打开时，数字和描述都会显示，当从选项窗口中选择行并关闭窗口时，只有数字标识符显示在选择HTML标记的输入字段中

---

这应该如何编码？我试了很长时间，但没有成功。我的应用程序是基于ASP.NETMVC5的，使用的是Bootstrap3，所以我不能使用所有似乎知道如何处理此类功能的插件。因此，想编写JavaScript/jQuery解决方案，但如何编写？

为什么不在title属性上设置描述，这样当它们悬停在上面时，就会显示工具提示

---

此外，您还可以查看jQuery自动完成。您可以在搜索和选择中显示不同的文本。

您是指选择的选项属性中的标题属性还是什么？你能举例说明如何处理吗？请注意，当您将鼠标悬停在下拉列表中的选项上时，将显示工具提示。是的，值得一试。但是缺少一件事，即当用户使用箭头键移动时，则没有可用的标题。有可能得到它吗？工具提示只发生在鼠标悬停事件中。那是本地财产。您可以浏览jquery工具提示插件。