change option text dynamically - knockout.js

Question

I want to dynamically load the text value of select option . When I click Red the text value should be Red and when I click Blue the text value should be Blue. Using 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

Add a chosenColor property to your view-model that will change upon clicking each of your "Red/Blue" toggles. And, using a custom function append the value to the caption of each <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>

See Fiddle

---

Additionally, a better Knockout-oriented approach would be:

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());

And

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

See Fiddle

Answer 2

You can do this simply using JQuery , calling the method text() when user clicks on the link, like follow:

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

I hope it helps you, bye.