動態更改選項文本 - 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> 

見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> 

見Fiddle

Answer 2

爲此，您可以簡單地使用JQuery，調用該方法text()當鏈接用戶點擊，就像如下：

$(".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>

我希望它能幫助你，再見。