Question

我有一个函数可以从后端数据库获取现有记录的详细信息（通过ajax）。检索记录后，将使用详细信息填充jsp页面，其中包括动态填充列表中项目的值。

当我需要将值设置到下拉列表中作为初始值时，我的问题就来了。即使在我明确设置了值之后，列表也始终默认为第一项。

我已经尝试将整个列表（并且不使用任何过滤器）硬编码到页面中，这允许将初始值设置为有效，因此我可以放心地认为问题在于我如何填充过滤后的清单。我似乎无法找到一个有效的解决方案（向用户显示整个列表不是一个选项）。

function getRecord() {

    $.ajax({
          url: "<s:url action='getRecords'/>",
          type: "POST",
          data: jQuery.param(searchObj),
          success: function(data, textStatus, jqXHR) {
            var _data = $.parseJSON(data);
            var record = _data["record"];

            $("#recordID").val(record["ID"]);
            $("#country").val(record["country"]);

            /* populate the country specific list */
            populateList(record["country"]);

            /* set the selected item in the list */
            $("#countryItems").val(record["countryItem"]); // doesn't work
            $("#countryItems").prop("selected", record["country"]); // doesn't work either
            $("#countryItems option [value='" + record["countryItem"] + "']").prop("selected", "selected"); // still doesn't work

            // do other stuff here
          }
        }

        function populateList(country) {

          $.ajax({
            url: "<s:url action='populateList'/>",
            type: "POST",
            data: {
              country: country
            },
            success: function(data, textStatus, jqXHR) {
              var _data = $.parseJSON(data);
              var listMap = _data["listMap"]; // filtered list

              // remove existing list
              $('#countryItems option').remove();

              // append new list
              $.map(listMap, function(k, v) {
                $('#countryItems').append(new Option(k, v));
              });
            }
          });
        }

Answer 1

您可以尝试选择该选项，然后将selected属性设置为true。

$('option item selector').prop('selected', true);

Answer 2

只是为此添加一些闭包。感谢所有试图提供帮助的人。不幸的是，这些建议都没有奏效（仍然不知道为什么）。我的同事最终提出了一个更复杂的解决方案，确实有效，所以我们不得不满足于此。

 function getRecord() {

    $.ajax({
      url: "<s:url action='getRecords'/>",
      type: "POST",
      data: jQuery.param(searchObj),
      success: function(data, textStatus, jqXHR) {
        var _data = $.parseJSON(data);
        var record = _data["record"];

        $("#recordID").val(record["ID"]);
        $("#country").val(record["country"]);

        /* populate the country specific list */
        // pass in the selected record as well
        populateList(record["country"], record["countryItem"]);


        // do other stuff here
      }
    }

 function populateList(country, selectedItem) {

      $.ajax({
        url: "<s:url action='populateList'/>",
        type: "POST",
        data: {
          country: country
        },
        success: function(data, textStatus, jqXHR) {
          var _data = $.parseJSON(data);
          var listMap = _data["listMap"]; // filtered list

          // remove existing list
          $('#countryItems option').remove();

          // append new list
          $.map(listMap, function(k, v) {

                if(v == selectedItem) {
                    // add the selected indicator together with the option
                    option='<option value="'+ v +'" selected="selected">'+ k +'</option>'
                }
                else{
                    // just add the option
                    option='<option value="'+v+'">'+k+'</option>'
                }

                $('#countryItems').append(option);
          });
        }
      });
    }

我认为这是正确的，因为它是唯一对我有用的解决方案，但我会赞成@Patrick Vogt的回答，因为它的答案是正确的。应该适用于大多数其他没有任何模糊问题的人。

如何在动态列表中设置初始值？

2 个答案: