Question

好的，请点击：

我有一个美国州名

的SELECT下拉选项

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

但我还需要将另一个值与页面视图中隐藏的值相关联。我不能使用类，名称或id来填充已经使用过的第二个值。并且只能在value属性中有一个值，因为它被添加到数据库中。是否有另一个属性我可以将第二个值作为占位符或其他东西传递给我？ true，false和undecided值与数据库中的状态相关联，需要关联在一起。我想我也可以做一个隐藏的SELECT元素，但问题是如何将隐藏的SELECT与其他两个SELECTS联系起来？

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

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

Answer 1

您可以使用class属性，如下所示：

<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

无法使用类，名称或ID 按原样填充第二个值已经使用过。而且只能有一个 value属性中的值

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

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

有关.data（）here

的更多信息

修改

您的HTML结构根本不会发生任何变化，这听起来像是在这种情况下的奖励。 .data（）函数只允许您为页面上的任何现有html元素存储“元数据”。如果您要在页面上查看源，则不会有此数据的跟踪。它存储在jQuery领域的某个地方，虽然我认为它只是一个基本JavaScript数组的抽象层，但我无法确切地说明这种机制是如何工作的。在这种情况下，您将要为每个＆lt;＆lt;选项＆gt;元件。

因此，要设置数据，请使用如上所示的循环。然后要检索数据，您只需要知道当前选择了哪个选项，然后再次使用.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插件会很容易，你可以用更少的工作量来完成，但这是另一个问题的答案。

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

3 个答案: