javascript - 获取没有类别/ID 的 OnClick 选项值

Question

我正在构建一个包含 100 个商品的电子商务网站。每个项目都有一个项目选项(即小、中、大)。每个选项都有一个带有标识该选项的整数的值。

当用户单击“添加到购物车”时，我需要将该值表示为变量。问题是所有这些项目都具有相同的类/id，因此我无法为每个项目编写一个 onclick 函数。

如何使用 jQuery 获取选定的选项值 onclick 而无需类/id 来识别它？

项目表单的基本结构:

<form>
    <label>First Item</label>
    <select>
        <option value="6432">Large</option>
        <option value="5332">Small</option>
    </select>
    <input type="submit" value = "Add to Cart">
</form>

这是一个 fiddle ，显示了我正在谈论的内容:http://jsfiddle.net/cusygh4o/

谢谢:-)

Answer 1

试试这个:

$('input[type="submit"]').on('click', function(e) {
   e.preventDefault();
   alert($(this).prev('select').val());
});

更新了 JSFiddle:http://jsfiddle.net/cusygh4o/1/

注意:如果您可以采取任何措施来缩小 'input[type="submit"]' 选择器的范围，您可以应该。例如，如果您有一个带有 id 的父元素，您可以执行类似 '#shopping-items input[type="submit"]' 的操作。