如何把多個參數放在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>";