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插件可以让你更轻松地做到这一点很容易，但这是另一个问题的答案。