引导选择器val won'不接受对象，只是字符串

Bootstrap selectpicker val won't accept an object just string

本文关键字：对象 不接受 字符串 选择器 val won      更新时间：2023-09-26

我想了解selectpicker的一个行为。我试着加载这个这个元素有一个属性从我的会话:

Template.checkNotification.onRendered(function () {
    var currentNotification = Session.get("currentNotification");
    this.$('#symptoms1').selectpicker({
        multipleSeparator: ' ',
    });
    this.$('#symptoms2').selectpicker({
        multipleSeparator: ' ',
    });
    var symptoms = [];
    for (var symptom of currentNotification.symptom.symptoms) {
        symptoms.push('"' + symptom.name + ';;' + symptom.value + '"');
    }
    var symptomsSelected = symptoms.join(", ");
    var test1 = ['Dor de Cabeça;;dor-de-cabeca','Náusea;;nausea'];
    var test2 = "["+symptomsSelected+"]";
    this.$('#symptoms1').selectpicker('val', test1);
    this.$('#symptoms2').selectpicker('val', test2);
});

当我执行这段代码时，只有元素#symptom1工作并将适当的选项加载到selectpicker中。

如何构建一个选项数组来提供给selectpicker ?

如果要将症状传递给selectpicker，则需要将其作为本机数组提供。下面的代码分别用原来的方式和新的方式(适用于给val赋值)构建数组:

var currentNotification = {
  symptom: {
    symptoms: [
      { name: "symptom1", value: "value1" },
      { name: "symptom2", value: "value2" },
      { name: "symptom3", value: "value3" },
      { name: "symptom4", value: "value4" },
      { name: "symptom5", value: "value5" }
    ]
  }
};
var symptoms = [];
for (var symptom of currentNotification.symptom.symptoms) {
  symptoms.push('"' + symptom.name + ';;' + symptom.value + '"');
}
var symptomsSelected = symptoms.join(", ");
var test1 = "["+symptomsSelected+"]";
var test2 = $.map(currentNotification.symptom.symptoms, function(symptom) {
  return symptom.name + ';;' + symptom.value;
});
console.log("test1: ", typeof test1, " value: ", test1);
console.log("test2: ", typeof test2, " value: ", test2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

这是如何工作的?jQuery $.map函数将处理currentNotification.symptom.symptoms数组中的每个症状，并分别对它们进行格式化，以便与selectpicker一起使用。每个元素都被格式化，但数组保留为原生Javascript数组，每个元素对应于原始currentNotification.symptom.symptoms数组。

比较test1和test2的结果，看看差异:

test1:  string  value:  ["symptom1;;value1", "symptom2;;value2", "symptom3;;value3", "symptom4;;value4", "symptom5;;value5"]
test2:  object  value:  [
  "symptom1;;value1",
  "symptom2;;value2",
  "symptom3;;value3",
  "symptom4;;value4",
  "symptom5;;value5"
]

注意，在这个示例代码中，test1是一个字符串，其格式类似于数组。这类似于JSON数组值，而不是原生Javascript数组值。test2是一个适合与selectpicker一起使用的Javascript数组。

使用$.map解决方案将解决您当前的问题并生成适当的Javascript数组。现在，您可以使用它来设置selectpicker的val:

this.$('#symptoms2').selectpicker('val', test2);

活塞:http://plnkr.co/edit/sjwK1e?p=preview

$scope.symptomsSelected="["+'"'My selected item is string'"'+"]"
$scope.test2 =angular.fromJson($scope.symptomsSelected);
$scope.test2=$scope.test2[0];
  {{test2}}
  <br>
  {{symptomsSelected}}

相关文章：