在HTML中使用jQuery時選擇它打開，而不是

Question

我試圖做一些窮人的兩列實現使用HTML的選擇標記和JavaScript的/ jQuery的點擊和'選擇更改'事件處理程序。

目的很簡單，但實現不是。

因此，情況是這樣的。

1. 用戶單擊一個空的選擇html組件，並從服務器獲取數據。
2. 當用戶需要從數據項中選擇標籤選擇他點擊選擇HTML組件
3. 選擇HTML組件打開並顯示行讀取這樣，它從兩個數組包含數據：數字標識符，短分離像「 - ---'，然後描述那個文本號碼標識符
4. 當選擇html標籤打開時用戶可以使用鼠標點擊或者輸入鍵來選擇一行。當選擇打開時，所有行都像'12321213 ---這是描述' e）在用戶選擇了他想要的行之後，選擇標籤的打開列表被關閉，並且在選擇標籤的輸入字段中應該只有數字標識符，如'12321213'和其餘的行被剝離。 F），當用戶選擇了從選擇標籤「12321213」，它是開放的，應該顯示整個行像如選擇階段「12321213 ---這是描述」

我已經嘗試解決了這個使用JavaScript/jQuery和兩個包含相同數據的數組，其中包含兩個字段的數字標識符和說明。第二個陣列是一個存儲器，用於在需要顯示時還原幷包含這兩個字段（數字和說明）。

我的代碼已經像以下內容：（Tasklist命令是選擇選項列表）

("#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標籤的輸入字段中只顯示數字標識符。

這應該如何編碼？已經嘗試了很長時間但沒有成功。我的應用程序是使用Bootstrap 3的ASP.NET MVC 5，所以我無法使用似乎知道如何處理這種功能的每個插件。所以，就像編寫一個JavaScript/jQuery解決方案，但如何？

Answer 1

爲什麼不在title屬性上設置描述，所以當它們懸停在它上面時，會顯示一個工具提示。

另外，您可以查看jQuery Autocomplete。您可以在搜索和選擇中顯示不同的文字。