如何在 OPTION for Javascript 中放置多个参数？

Question

我通过 PHP 在 SQL 中创建了一个包含 3 列的表。我正在尝试以这种方式将值放入 SELECT 下拉列表中：

• 第一列将在 OPTION 的值中（用于传递 POST）。
• 第二列将显示在 OPTION 中。
• 第三列将被隐藏并粘贴到下拉列表中的每一行，因此当用户从下拉列表中选择一个选项时，隐藏列将显示在其他 div 中。

例如，如果表是：

col1  col2  col3
-----------------
1     Joe   Key st.
2     Matt  Link st.

当用户选择 Joe 时，Key st. 将显示在一个单独的 div 中，用户按下回车后，1 的值将通过 POST 发送。

这是我目前得到的：

$('.foo3').on('change', function() {
  var add = $(this).parent().find('.foo3').value();
  $('.foo2').html(add);
});

<select class="foo3">
  <?php while ($curRow=mysqli_fetch_array($TableOutput)) {                                                      
    echo "<input class='foo' type='hidden' value='{$curRow['col3']}'><option value='{$curRow['col1']}'>{$curRow['col2']}</option>"; 
  } ?>
</select>
<div class="foo2"></div>

谢谢！

Answer 1

您可以使用data 属性将自己的元数据存储在元素中。然后，您可以在选择 option 时将其读出。试试这个：

$('.foo3').change(function() {
  $('.foo2').text($(this).find('option:selected').data('location'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="foo3">
  <option>Please select...</option>
  <option value="1" data-location="Key St.">Joe</option>
  <option value="2" data-location="Link St.">Matt</option>
</select>
<div class="foo2"></div>

要创建 HTML 输出，您的 PHP 应如下所示：

echo "<option value=\"{$curRow['col1']}\" data-location=\"{$curRow['col3']}\">{$curRow['col2']}</option>";