jQuery select2 - 如何从选项中获取属性？

Question

如何使用 bootstrap 中的 select2 从 SELECT 内的 selected(!) OPTION 元素中获取属性？

HTML：

<select id="select_project_type">
    <option value="1" required-property="A">Option 1</option>
    <option value="2" required-property="B">Option 2</option>
</select>

JS：

$('#select_project_type').select2({
    placeholder: $('#select_project_type').prop('placeholder')
});

$('#select_project_type').on('select2-selecting', function(e) {
    console.log(e); // Here I got all object, but I don't know how 
                    // to get required-property from selected option
});

Answer 1

我们可以将属性更新为 data-required-property ，

然后你可以试试下面的代码：

$('.select2').select2({
placeholder: $('.select2').prop('placeholder')
});

$('#select_project_type').on('select2-selecting', function(e) {
   console.log($(this).find(":selected").data('required-property')); 
});

DEMO

Answer 2

您可以尝试像这样使用精确的 CSS 选择器：

$("#select_project_type option[value=1]").attr("required-property");
$("#select_project_type option[value=2]").attr("required-property")

演示：http://jsfiddle.net/2cXt5/

编辑：要仅从所选选项中获取属性，请使用此选择器：

$("#select_project_type option:selected").attr("required-property");

另外，您可能希望使用 select change event 来查找选项何时更改并更新 ypur 数据。

演示：http://jsfiddle.net/2cXt5/2/