動的にオプションのテキストを変更する - knockout.js

Question

select optionのテキスト値を動的に読み込みたい。 [赤]をクリックすると、テキストの値は赤になります。[青]をクリックすると、テキストの値は青になります。 knockout.js

<a class="a_red" data-bind="">Red</a> 
<a class="a_blue" data-bind="">Blue</a> 
<select> 
    <option value="25"> 25 Red/Blue </option> load either Red or Blue 
    <option value="50"> 50 Red/Blue </option> 
    <option value="100"> 100 Red/Blue </option> 
    <option value="200"> 200 Red/Blue </option> 
</select> 

Answer 1

を使用すると、あなたの「レッド/ブルー」トグルのそれぞれをクリックすると変更されます、あなたのビューモデルにchosenColorプロパティを追加します。そして、カスタム関数を使用すると、各<option>のキャプションに値を追加します。

JS：

var vm = { 
    chosenColor: ko.observable('Red'), 
    chosenValue: ko.observable(), 
    getCaption: function(val) { 
    return val + ' ' + this.chosenColor() 
    } 
}; 

ko.applyBindings(vm); 

はHTML：

<a href="javascript:;" class="a_red" data-bind="click: chosenColor.bind($data, 'Red')">Red</a> 
<a href="javascript:;" class="a_blue" data-bind="click: chosenColor.bind($data, 'Blue')">Blue</a> 

<select data-bind="value: chosenValue"> 
    <option value="25" data-bind="text: getCaption(25)"></option> 
    <option value="50" data-bind="text: getCaption(50)"></option> 
    <option value="100" data-bind="text: getCaption(100)"></option> 
    <option value="200" data-bind="text: getCaption(200)"></option> 
</select> 

A、さらにFiddle

---

を参照してください。より良いノックアウト指向のアプローチは：

var qtys = [25,50,100,200]; 

function viewModel() { 
    var self = this; 

    this.chosenColor = ko.observable('Red'); 
    this.chosenValue = ko.observable(); 
    this.generateOptions = function(vm) { 
    return qtys.map(function(q) { 
     return { value: q, 
       caption: q + ' ' + self.chosenColor() }; 
    }) 
    } 
}; 

ko.applyBindings(new viewModel()); 

そして

<a href="javascript:;" class="a_red" data-bind="click: chosenColor.bind($data, 'Red')">Red</a> 
<a href="javascript:;" class="a_blue" data-bind="click: chosenColor.bind($data, 'Blue')">Blue</a> 

<select data-bind="value: chosenValue, 
        options: generateOptions(), 
        optionsValue: 'value', 
        optionsText: 'caption'"> 
</select> 

あなたは単にフォローのように、ユーザーがリンクをクリックしたときにメソッドtext()を呼び出し、JQueryを使用してこれを行うことができますFiddle

Answer 2

を参照してください：

$(".a_red").click(function(){ 
 
    $("option").text("red"); 
 
}); 
 

 
$(".a_blue").click(function(){ 
 
    $("option").text("blue"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="a_red">Red</a> 
 
<a href="#" class="a_blue">Blue</a> 
 
<select> 
 
    <option value="25"> 25 Red/Blue </option> 
 
    <option value="50"> 50 Red/Blue </option> 
 
    <option value="100"> 100 Red/Blue </option> 
 
    <option value="200"> 200 Red/Blue </option> 
 
</select>

私はそれがあなたを助けてくれることを願っています。