Home > DeveloperSection > Forums > How to add item in list box using knockoutjs
Ankita Pandey
Ankita Pandey

Total Post:183

Posted on    February-18-2015 6:59 AM

 JQuery Knockout.js  Knockout mvc 

 1 Reply(s)
 541  View(s)
Rate this:
I am trying to add item in list box

This is my view code:

<div class="container" style="max-width: 400px; border: 1px solid #e2e2e2; padding: 50px; margin-top: 30px">

        <br />

        <div class="row">

            <div class="row">

                <div class="col-md-4">

                    Item Name:


                <div class="col-md-6">

                    <input type="text" class="form-control" data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />


                <div class="col-md-2">

                    <button type="submit" class="btn btn-primary" data-bind="enable: itemToAdd().length > 0 ">Add</button>



            <br />

            <div class="row">

                <div class="col-md-4">

                    Item List:


                <div class="col-md-8">

                    <select multiple="multiple" class="form-control" style="height: 100px" data-bind="options: items"></select>






And this is my script code:

$(function () {

   var SimpleListModel = function (items) {

   this.items = ko.observableArray(items);

   this.itemToAdd = ko.observable("");

   this.addItem = function () {

   if (this.itemToAdd() != "") {






     ko.applyBindings(new SimpleListModel());


This is my complete code but item is not add in list box. I don’t know where is create problem of my code. Please solve my problem as soon as possible.

Thanks in advance!!

Pravesh Singh

Total Post:411

Posted on    February-18-2015 7:17 AM

You missed to call function addItem on click button like this

<button type="submit" class="btn btn-primary" data-bind="enable: itemToAdd().length > 0,click: addItem">Add</button>

Don't want to miss updates? Please click the below button!

Follow MindStick