0

次のように選択リストバインディングを作成するだけです

<select id="listingstatus"   data-bind="options: ListingTypeArrary, optionsText: 'Text', optionsValue: 'Value', selectedOptions: ListingType" ></select>

私のモデル

var listArray = JSON.parse([{
    "Selected": false,
    "Text": "Commercial",
    "Value": "4"
}, {
    "Selected": false,
    "Text": "Residential",
    "Value": "5"
}]);
self.ListingTypeArrary = ko.observableArray();
$.each(listArray, function (index, value) {

    var obj = {};
    obj["Text"] = value.Text;
    obj["Value"] = value.Value;
    self.ListingTypeArrary.push(obj);

});

self.ListingType = ko.observable('@Model.ListingTypeId'); // @Model.ListingTypeId will be equals to 5

このノックアウトを行った後、ドロップダウン/選択リストを完全にレンダリングします。しかし、ドロップダウンを表示する必要はなく、選択したアイテムをテキストとして表示するだけでよいという要件があります。誰でも私を助けることができますか？

前もって感謝します 。

4

1 に答える 1

1

私が正しく理解している場合、ユーザーが選択を行うと、<select>が消え、その場所にテキスト ラベルが表示されます。

選択した に基づいてそのラベルを計算し、条件付きで またはテキスト ラベルValueを表示する必要があります。<select>

HTML

<!-- ko ifnot: SelectedListingText -->
<select id="listingstatus" data-bind="
    options: ListingTypeArray,
    optionsText: 'Text',
    optionsValue: 'Value',
    value: ListingType"></select>
<!-- /ko -->

<!-- ko if: SelectedListingText -->
<span data-bind="text: SelectedListingText"></span>
<!-- /ko -->

Javascript

元データ

var listArray = [
  {
    "Selected": false,
    "Text": "Commercial",
    "Value": "4"
  },
  {
    "Selected": false,
    "Text": "Residential",
    "Value": "5"
  }
];

選択のオプション

// Synthesize the listing type array for the select
ListingTypeArray = ko.observableArray([{ Text: 'Choose one', Value: null }]);
$.each(listArray, function (index, value) {
    var obj = {};
    obj["Text"] = value.Text;
    obj["Value"] = value.Value;
    ListingTypeArray.push(obj);
});

選択したオプションのストレージ

// The chosen listing type
ListingType = ko.observable();

計算されたテキスト ラベル

// Compute the label text based on the selected Value
SelectedListingText = ko.computed(function () {
  type = ListingType();
  if(!type) return;

  // Find the text associated with this type
  var foundListingTypeName;
  $.each(listArray, function (index, listingType) {
    if(listingType.Value == type) {
      foundListingTypeName = listingType.Text;
      return false;
    }
  });

  return foundListingTypeName;
});

実際: http://jsfiddle.net/steveluscher/rmnMt/

于 2013-07-15T04:30:51.023 に答える