从 jquery 中的数据库中获取多选下拉绑定的选定 id 值答案

【问题标题】：get selected id value of multiselect dropdown binds from database in jquery从 jquery 中的数据库中获取多选下拉绑定的选定 id 值
【发布时间】：2019-11-07 03:29:34
【问题描述】：

我有一个从数据库绑定的多选下拉列表我想获取所选值的 id

我尝试使用 jquery 函数来获取选定值的数组，但它永远无法工作

我的html代码

        @Html.DropDownListFor(x => x.RolesMenusMain, GlobalLists.GetMenus(),
         new { @class = "form-control select2 multiple", multiple = "multiple", selectedvalue = selected })

jquery 代码

          $(document).ready(function () {
        $('.select2').select2({
            width: '100%'
        });
        debugger;
        var IDs = [];

        for (var i = 0; i < $("#RolesMenusMain").attr("selectedvalue").split(",").length; i++) {
            if ($("#RolesMenusMain").attr("selectedvalue").split(",")[i] != "")
                IDs.push($("#RolesMenusMain").attr("selectedvalue").split(",")[i]);
            alert(IDs);
        }

        $("#RolesMenusMain").val(IDs).trigger("change");
    });

【问题讨论】：

标签： javascript razor model-view-controller multi-select

【解决方案1】：

您的代码没有问题，应该可以按照以下 sn-p 所示工作。确保变量 selected 是一个字符串，其中包含用逗号分隔的 id。

$(document).ready(function () {
        $('.select2').select2({
            width: '100%'
        });
        debugger;
        var IDs = [];

        for (var i = 0; i < $("#RolesMenusMain").attr("selectedvalue").split(",").length; i++) {
            if ($("#RolesMenusMain").attr("selectedvalue").split(",")[i] != "")
                IDs.push($("#RolesMenusMain").attr("selectedvalue").split(",")[i]);
            alert(IDs);
        }

        $("#RolesMenusMain").val(IDs).trigger("change");
    });

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


<select id="RolesMenusMain" multiple="multiple" class="select2" selectedvalue="1,2,3">
  <option value="">---</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

【讨论】：

【解决方案2】：

使用伪选择器:selected 获取选中的选项。

$('select').on('change', function() {
  const selectedOption = $('select option:selected')[0];
  console.log(selectedOption);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="garden">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option>Bushes</option>
  <option>Grass</option>
  <option>Dirt</option>
</select>

【讨论】：