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);
},

score 17 · Accepted Answer · answered Apr 01 '17 at 14:35

17

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

answered Apr 01 '17 at 14:35

user3297291

22,592
4
29
45

we cannot call by one function only? – andiwan halim Apr 01 '17 at 14:46
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. – user3297291 Apr 01 '17 at 16:01
but if i want enter the value of parameter in selectedItem, what should i put into it? – andiwan halim Apr 01 '17 at 16:49
1

@user3297291 Tried the same but getting error as: Unable to process binding "options: function (){return seedData }" Message: seedData is not defined – Twinkal Aug 06 '17 at 08:03
1

what about ajax when select changed? How do I put it in knockoutjs way. – Yohanes Pradono Oct 16 '17 at 07:15
@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. – user3297291 Oct 16 '17 at 12:50
I don't understand how refers to seedData.data property.or the selectedItem variable – jimscafe Jul 01 '18 at 04:20
@jimscafe There's a `with` binding on `selectedItem` around it. The *binding context* of the `` is therefore an element of `seedData`. Each of those items contains a `data` property, allowing us to bind to it. – user3297291 Jul 02 '18 at 07:28
@user3297291 - Wow, I hadn't got that far with the documentation. Now I see it - thank you – jimscafe Jul 03 '18 at 09:11

on Change event in select with knockout

1 Answers1

Linked