如何把多个参数放在OPTION的Javascript里面？

Question

我通过PHP创建了一个SQL表，它有3列。我试图通过这种方式将值放入SELECT下拉列表中：

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

例如，如果该表是：

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

当用户选择乔，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>";