在select2中使用Ajax时无法获取自定义属性值

debugcn 发表于 Dev

断层扫描

我正在使用ASP.NET

我有一个使用select2的下拉列表，并且在选择某些内容时使用ajax调用了带有两个参数的（apicontroller）动作。

那个行动：

public class MyController: ApiController
{
    [HttpGet]
    public string Helper(string para0, string para1, string para2) { return something;}
}

的HTML：

<select id="selectCase">
    <option>Select a Case</option>
    <option value="abc" data-para1="1" data-para2="2"> "abc" </option>
    <option value="def" data-para1="1" data-para2="2"> "abc" </option>
</select>

js函数：

$('#selectCase').on('select2:select', function() {
        $.ajax({
            type: "GET",
            url: "/api/MyController/Helper?para0=" + $(this).val() + "&para1=" + $(this).attr("data-para1") + "&para2=" + $(this).attr("data-para1"),

但是当它运行时，只有$（this）.val（）获得正确的值，$（this）.attr（“ data-para1”和$（this）.attr（“ data-para1”都未定义。尝试使用$（this）.data（“ para1”），但仍然无法正常工作。

谢谢，

我实际上跳过了我在html中使用optgroup的部分，不确定是否有什么不同

<select id="selectCase">
    <option></option>
    <optgroup label="0">
        <option value="abc" data-para1="1" data-para2="2"> "abc" </option>
    </optgroup>
    <optgroup label="0">
        <option value="def" data-para1="1" data-para2="2"> "abc" </option>
    </optgroup>
</select>

斯瓦蒂

您可以$(this).find('option:selected')用来获取所选选项，然后获取在每个选项中定义的自定义属性。

演示代码：

$('#selectCase').select2({
  width: '100%',
  placeholder: "Select an Option",
  allowClear: true
});

$('#selectCase').on('select2:select', function() {
  //getting selected option and then retrieve required data
  var $select = $(this).find('option:selected');
  console.log("para0=" + $select.val() + "&para1=" + $select.attr('data-para1') + "&para2=" + $select.attr('data-para2'));

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />

<select id="selectCase">
    <option></option>
    <optgroup label="0">
        <option value="abc" data-para1="1" data-para2="2"> "abc" </option>
    </optgroup>
    <optgroup label="0">
        <option value="def" data-para1="1" data-para2="2"> "abc" </option>
    </optgroup>
</select>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。