web-dev-qa-db-ja.com

Knockout.js-ドロップダウンメニューで選択したテキストの値を取得します

ドロップダウンメニューから選択したTEXTの値を取得する方法を知りたいのですが、ドロップダウンメニューには固定データがあり、「ko.observableArray（）」が入力されていないことを覚えておいてください。何か案は？

必要なオプションを選択するとき：値とテキストの選択。

<p>
    Select a car:
    <select data-bind="value: selectedValue, optionsText:???">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
</p>

<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>

My ko ViewModel：

var viewModel = {
      selectedValue : ko.observable(),
      selectedText :  ko.observable()
};

ko.applyBindings(viewModel);

このフィドルを参照してください： JSFiddle

knockout.jsselect-menu
8
Igor

Knockout.jsで可能な解決策があるかどうかはわかりません。私はあなたに2つの可能な解決策をさせます：

ソリューション1

ネイティブJavascriptを少し使用して、目標を達成できます。

viewModel.selectedValue = ko.observable();
viewModel.selectedText = ko.computed(function () {
    var elem = document.querySelector("select option[value=" + viewModel.selectedValue() + "]");
    return elem && elem.innerHTML;
});

ご覧のとおり、「値」を取得して、要件を満たすDOM要素を返すために使用できます。もちろん、必要に応じて、selectをIDに置き換えることができます。

このフィドル をチェックして、動作することを確認してください。

ソリューション2

これを行うノックアウトの方法は、入力するすべての要素を含む配列を作成することです。

var cars = [{ id: 'volvo', name: 'Volvo' }, { id: 'saab', name: 'Saab' }, { id: 'mercedes', name: 'Mercedes' }, { id: 'audi', name: 'Audi' }];

その後、「value」と言うときに必要なものによって異なります。キー/値リストではなく、オブジェクトをバインドしていることに注意してください。

HTML：

<select data-bind="options: cars, value: selectedCar, optionsText: 'name'"></select>

そしてあなたのJS：

selectedCar = ko.observable();
selectedValue = ko.computed(function () { 
    return selectedCar() && selectedCar().id; 
});
selectedText =  ko.computed(function () { 
    return selectedCar() && selectedCar().name; 
});

このようにして、「値」と「テキスト」（idおよびnameプロパティと呼ばれる方がよい）を2つの計算されたオブザーバブルに別々に持つことになります。

フィドルの動作 を参照してください。

14
lante

これを実現する必要があり、ko.computed関数を追加して、以下のオプションから選択したテキストを取得しました。

// assume that options has been populated with Key / Value pairs
self.options = ko.observableArray([]);

self.selectedType = ko.observable(null);
self.selectedTypeText = ko.observable(null);
self.selectedType.subscribe(function (newValue) {
    if (newValue) {
        self.checkAccess(newValue);

        $.each(self.options(), function (i, item) {
            if (item.Key === newValue) {
                self.selectedTypeText(item.Value);
            }
        });
    }
});
2
csharpsql

これをバインドするオプションを操作する必要があります。そして Jeff が言うように、誤用しないでください。

var viewModel = {
      selectedValue : ko.observable(),
      selectedText :  ko.observable(),
    carOptions : ['Volvo','Saab', 'Mercedes', 'Audi']
};

ko.applyBindings(viewModel);

マークアップ：

<p>
    Selecte a car:
    <select data-bind="value: selectedValue, options: carOptions">

    </select>
</p>

<span data-bind="text: selectedValue"></span>
<br/>
<span data-bind="text: selectedText"></span>

これが最も簡単な方法です。より複雑なシナリオについては、 docs にアクセスしてください。

JsFiddle 1 、 JsFiddle 2

1
deostroll