设置下拉列表的选定值,其中使用Jquery动态追加下拉列表的选项

时间:2018-01-02 07:55:37

标签: javascript jquery html asp.net-mvc html-select

请帮助如果有人有解决方案。

我正在使用dependency Dropdown,选择Dealer's Dropdown Customer's List的位置与Jquery动态绑定。

根据经销商价值处于编辑模式时,我在Document.Ready中调用一个函数,该函数通过从Ajax调用中获取数据来附加客户列表。

执行此功能后,我从选项中设置所选值,但显示null/blank。尝试了很多解决方案。我在这个网站上提到了很多问题,但结果是一样的。我在哪里搞错了?

<select id="ddlcustomerlstEdit" name="ddlcustomerlstEdit" class="form-control">
         <option value=""> -select Customer- </option>
</select>

这是在document.ready内调用的函数中List的动态绑定。

if (data != "Blank") {
      $("#ddlcustomerlstEdit").html("");
           var str = '<option value=""> -Select Customer- </option>';
           for (var i = 0; i < data.length; i++) {
               str += '<option value=' + data[i].CustomerID + '> ' + data[i].CustomerName + '</option>';
           }
                        $("#ddlcustomerlstEdit").append(str);
}

此功能执行后我立即设置所选值。

var customerIdVal = $("#hdnCustomerID").val();
$('#ddlcustomerlstEdit option[value="' + customerIdVal+'"]').attr("selected", "true");
alert($("#ddlcustomerlstEdit").val());

$("#hdnCustomerID")此值在模型中,并且它包含的值存在于<option>中,但来的警报始终为空或空白。

修改

enter image description here

1 个答案:

答案 0 :(得分:1)

这应该有效。

$(document).ready(function() {
  var data = [{
    'CustomerID': '2',
    'CustomerName': 'Test55'
  }];
  if (data != "Blank") {
    $("#ddlcustomerlstEdit").html("");
    var str = '<option value=""> -Select Customer- </option>';
    for (var i = 0; i < data.length; i++) {
      str += '<option value=' + data[i].CustomerID + '> ' + data[i].CustomerName + '</option>';
    }
    $("#ddlcustomerlstEdit").append(str);

    var customerIdVal = $("#hdnCustomerID").val();
    $('#ddlcustomerlstEdit option[value="' + customerIdVal + '"]').attr("selected", "true");
    alert($("#ddlcustomerlstEdit").val());
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlcustomerlstEdit" name="ddlcustomerlstEdit" class="form-control">
         <option value=""> -select Customer- </option>
</select>

<input type='hidden' value='2' id='hdnCustomerID' />