on Change event in select with knockout

Question

I have a problem how to call onchanges knock js to my select option, i already have a function and html, but when i choose the select option, nothing changes

<select data-bind="event:{change:setSelectedStation() },
                   options: seedData,
                   optionsText: 'text',
                   optionsValue: 'value'">
</select>

here is my function

setSelectedStation: function(element, KioskId){
     this.getPopUp().closeModal();
     $('.selected-station').html(element);
     $('[name="popstation_detail"]').val(element);
     $('[name="popstation_address"]').val(KioskId);

     $('[name="popstation_text"]').val(element);
     // console.log($('[name="popstation_text"]').val());
     this.isSelectedStationVisible(true);
},

Brok

Answer 1

Use knockout's two-way data-binds instead of manually subscribing to UI events.

Knockout's value data-bind listens to UI changes and automatically keeps track of the latest value for you.

Instead of replacing HTML via jQuery methods, you use text, attr and other value bindings to update the UI whenever your selection changes.

If you want to perform additional work when a selection changes (e.g. closing a pop up), you subscribe to the selected value.

var VM = function() {
  this.seedData = [
    { 
      text: "Item 1",
      data: "Some other stuff"
    },
    { 
      text: "Item 2",
      data: "Something else"
    },
    { 
      text: "Item 3",
      data: "Another thing"
    }
  ];
  
  this.selectedItem = ko.observable();
  
  this.selectedItem.subscribe(function(latest) {
    console.log("Input changed");
  }, this);
};

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="
        value: selectedItem,
        options: seedData,
        optionsText: 'text'">
</select>

<!-- ko with: selectedItem -->
<p>
  Your selection: <span data-bind="text: data"></span>
</p>
<!-- /ko -->

Tautologize

we cannot call by one function only? – Brok

You can, bit you shouldn't... if you chose to use knockout as your framework, it's best to stuff "the knockout way". If you want to manage your own event handling and update UI elements one by one, it's better to just use jQuery and skip knockout altogether. – Tautologize

but if i want enter the value of parameter in selectedItem, what should i put into it? – Brok

@Tautologize Tried the same but getting error as: Unable to process binding "options: function (){return seedData }" Message: seedData is not defined – Incondensable

what about ajax when select changed? How do I put it in knockoutjs way. – Hecate

@DoniWibowo If you update your selection in code, knockout will update the UI for you. E.g.: this.selectedItem(this.seedData[0]) will reset the select box to the first item in the list. – Tautologize

I don't understand how <span data-bind="text: data"></span> refers to seedData.data property.or the selectedItem variable – Officiary

@Officiary There's a with binding on selectedItem around it. The binding context of the <span> is therefore an element of seedData. Each of those items contains a data property, allowing us to bind to it. – Tautologize

@Tautologize - Wow, I hadn't got that far with the documentation. Now I see it - thank you – Officiary