12

同じページのドロップダウンで選択したオプションのテキスト値に基づいて変更する div のテキスト ボックスをバインドする簡単な方法はありますか?

<div data-bind="text: dropdownValue"></div>
<select>
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

javascriptを使用してselect要素に値を入れたくないことに注意してください。HTMLから直接値にバインドしたいと思います。jQuery を組み込んで機能させることもできます。

4

2 に答える 2

26

昨日一緒に投げていたもので同様の機能を探していましたが、それが見つからなかったので、値属性に格納していたものを変更するだけになりました。場合によっては、それが最も簡単な解決策です。

これは、jQuery を使用して問題を解決するための簡単で見苦しい解決策です。

HTML

<div data-bind="text: dropdownText"></div>
<select data-bind="value: dropdownValue" id="dropdown">
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

JS

function ViewModel() {
    var self = this;
    this.dropdownValue = ko.observable();
    this.dropdownText = ko.computed(function() {
        return $("#dropdown option[value='" + self.dropdownValue() + "']").text();
    });
};

ko.applyBindings(new ViewModel());

実際の例: http://jsfiddle.net/5PkBF/

これを複数の場所で実行しようとしている場合は、カスタム バインディングを作成するのがおそらく最善です。たとえば、次のようになります。

HTML

<div data-bind="text: dropdownValue"></div>
<select data-bind="selectedText: dropdownValue">
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

JS

ko.bindingHandlers.selectedText = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        value($("option:selected", element).text());

        $(element).change(function() {
            value($("option:selected", this).text());
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $("option", element).filter(function(i, el) { return $(el).text() === value; }).prop("selected", "selected");
    }
};

function ViewModel() {
    this.dropdownValue = ko.observable();
};

ko.applyBindings(new ViewModel());

実際の例: http://jsfiddle.net/5PkBF/1/

于 2012-06-23T15:12:29.947 に答える
3

これは、同様の機能を実装した方法です。私は自分のモデルで「dropDownValue」と呼ばれるオブザーバブルを定義しました。「dropDownValues」という監視可能な配列もありました。私のHTMLは次のようになりました：

<span data-bind="text: dropDownValue"></span>
<select data-bind="options: dropDownValues, optionsValue: 'FieldText', optionsText: 'FieldText', value: dropDownValue"></select>

optionValues と optionsText に同じフィールドを使用したことに注意してください (この場合、optionsText が本当に必要かどうかはわかりません)。私の特定のアプリでは、「dropDownValue」は他の場所で事前に入力されていたので、上記の選択を含むダイアログボックスを開いたときに、以前に入力された値にデフォルト設定し、ユーザーが変更した場合にバインドするようにしました。その変更をデータベースに反映できます。

于 2012-09-07T18:58:24.637 に答える