用form表单提交select时，如何提交被选中的option的其他属性

Question

用form表单提交时，如何取到select元素中被选中的option的一些属性呢？
例如下面代码中的 foodsid foodsenname foodscnname等一下属性

<select name="foods" id="foods" class="bottom_add_foods">
    <option foodsid="111" foodsenname="kkk" foodscnname="西红柿">西红柿</option>
    <option foodsid="222" foodsenname="xxx" foodscnname="土豆">土豆</option>
    <option foodsid="333" foodsenname="hhh" foodscnname="盐焗鸡爪">盐焗鸡爪</option>
</select>

Answer 1

value 绑定一个对象试试？比如

value="{ foodsid: '111', foodsenname: 'kkk', foodscnname: '西红柿' }"

然后在 js 中拿到 value 后 JSON.parse 转成对象

Answer 2

<select name="foods" id="foods" class="bottom_add_foods">
        <option value="111_kkk_西红柿">西红柿</option>
        <option value="111_xxx_土豆">土豆</option>
        <option value="333_hhh_盐焗鸡爪">盐焗鸡爪</option>
    </select>

Answer 3

$("#foods").find("option:selected").attr("foodsid");

Answer 4

option对象.getAttribute("foodsid");