jQuery HTML 选择下拉需要两个值，但显示/提交一个。用于选择另一个下拉选项的第二个值

Question

好的，到此为止：

我有一个带有美国州名的 SELECT 下拉选项

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

但我还需要将另一个值与隐藏在页面视图中的 this 相关联。我不能使用 class、name 或 id 来填充第二个值，因为它们已经被使用了。并且 value 属性中只能有一个值，因为它正在被添加到数据库中。是否有另一个属性我可以将第二个值作为占位符或其他东西传递？ true、false 和 undecided 值与数据库中的状态相关联，需要关联在一起。我想我也可以做一个隐藏的 SELECT 元素，但问题是如何将隐藏的 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 下拉列表中，我需要一种方法来根据选择的第一个 SELECT 下拉选项选择第二个 SELECT 下拉列表。

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

因此，如果用户选择“wash dc”，则第二个 SELECT 下拉菜单应默认为 false。

如果这有帮助，我正在为 JavaScript 使用 jQuery，我想我可以做这个问题的第二部分，但我该如何做第一部分？

Answer 1

您可以按如下方式使用类属性：

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

class 属性可以包含多个用空格分隔的类。

您还可以创建自定义属性。不过，这会破坏您页面的 HTML(XHTML) 验证。

Answer 2

在 JavaScript 中将信息作为数组加载。要么对其进行硬编码（不好），要么将其作为单独的 AJAX 查询发送（更好）。这既可以为您提供所需的数据，又可以在您需要时更轻松地访问它，因为它已经在内存中，而不是作为页面的一部分存储。

Answer 3

不能使用class、name或id来 按原样填充第二个值 已经使用了。并且只能有一个 value 属性中的值

好吧，说你不能使用这些（常用）方法限制了你的选择。由于您已经在使用 jQuery，因此想到了 .data() 函数。它基本上允许您在任何给定的 DOM 对象上存储键/值对。因此，您可以浏览列表中的所有选项，然后

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

更多信息 .data() 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' );

'value1' 可以是任何东西，包括一个 json 字符串，如果需要，它可以让您用一个键存储多个值。

最后，如果您要反复使用此功能，那么创建一个 jQuery 插件会很容易，让您可以用更少的工作量来完成，但这是另一个问题的答案。