jQuery HTML select drop down需要兩個值，但顯示/提交一個。用於選擇另一個下拉選項

Question

確定這裏的第二個值有云：

我與美國各州名稱

<select> 
    <option value="ca">california</option> 
    <option value="ut">utah</option> 
    <option value="mi">michigan</option> 
</select> 

，但我還需要另一個值與此說是隱藏的關聯一個SELECT下拉選項頁面視圖。我不能使用class，name或id來填充已經使用的第二個值。並且在值屬性中只能有一個值，因此會將其添加到數據庫中。是否有另一個屬性可以將第二個值作爲佔位符或其他東西傳入？真實的，錯誤的和未定的值與數據庫中的狀態相關聯並且需要關聯在一起。我想我也可以做一個隱藏的SELECT元素，但問題是如何將隱藏的SELECT與其他兩個選擇聯繫起來？

<select> 
    <option value="ca">california</option> <!-- true--> 
    <option value="ut">utah</option>  <!-- undecided--> 
    <option value="mi">michigan</option> <!-- false--> 
    <option value="oh">ohio</option>  <!-- false--> 
    <option value="az">arizona</option> <!-- undecided--> 
    <option value="dc">wash dc</option> <!-- false--> 
</select> 

現在添加了（不知）第二個值至第一選擇下拉我需要一種方法來選擇下基於第一選擇第二選擇掛斷下拉選擇的選項。

<select> 
    <option value="t">true</option> 
    <option value="f">false</option> 
    <option value="u">undecided</option> 
</select> 

所以如果用戶選擇「洗直流」，第二個SELECT下拉應該默認爲false。

我正在使用JavaScript的JavaScript，如果這有幫助，我想我可以做這個問題的第二部分，但我該如何做第一部分？

<select> 
    <option class="someclass true" value="ca">california</option> <!-- true--> 
    <option class="someclass undecided" value="ut">utah</option> <!-- undecided--> 
    <option class="someclass false" value="mi">michigan</option> <!-- false--> 
</select> 

類屬性可以包含由空格分隔的多個類：

Answer 1

如下您可以使用類屬性。

您也可以創建一個自定義屬性。這會破壞你的頁面的HTML（XHTML）驗證。

Answer 2

將信息加載爲JavaScript中的數組。無論是硬編碼（壞），還是作爲單獨的AJAX查詢（更好）發送。這將爲您提供所需的數據，並在您需要時更方便地訪問，因爲它已經存儲在內存中，而不是作爲頁面的一部分存儲。

Answer 3

不能使用類的名稱或ID 填充第二個價值，因爲它們已經使用 。並且只能在價值一個 屬性值

好了，所以說你不能任意使用這些（普通）方法會限制你的選擇。由於您已經在使用jQuery，因此可以想到.data（）函數。它基本上允許您在任何給定的DOM對象上存儲鍵/值對。所以，你可以通過列表中的所有選項並上。數據（）

$('#selectID options').each(function(){ 
    $.data($(this), 'key', 'value') 
}); 

更多信息旋here

編輯：

會有一點變化都沒有到您的HTML結構，這聽起來像是在這種情況下的獎金。 .data（）函數允許您爲頁面上任何現有的html元素存儲「元數據」。如果您要在頁面上查看源代碼，則不會追蹤此數據。它存儲在jQuery土地的某處，我不能確切地說明這個機制是如何工作的，儘管我認爲它只是一個基本JavaScript數組的抽象層。在這種情況下，您將要將數據附加到每個<選項>元素。

所以設置你使用循環的數據如上所示。然後檢索數據，您只需要知道當前選擇了哪個選項，然後再次使用.data（）和該鍵來取回數值。

var storedValue = $.data($('#selectID option:selected'),'key') 

檢索很簡單，我希望你的挑戰將會得到的數據，所以你可以設置它。一種方法是在服務器端生成JavaScript，然後將其發送到頁面。你可能會不使用循環，因爲我將假設每個值是唯一的，它可能看起來更像：

$.data($('#selectID options:eq(0)'), 'key', 'value1'); 
$.data($('#selectID options:eq(1)'), 'key', 'value2'); 
$.data($('#selectID options:eq(2)'), 'key', 'value3'); 
$.data($('#selectID options:eq(3)'), 'key', 'value4'); 

「值1」可以是任何東西，包括一個JSON字符串，將允許你如果需要，用一個鍵存儲幾個值。

最後，如果你打算重複使用這個功能，創建一個jQuery插件可以讓你更輕鬆地做到這一點很容易，但這是另一個問題的答案。