使用Knockout JS从下拉框中向observalearray添加项

Adding item to observablearray from a dropdown box using Knockout JS

本文关键字：observalearray 添加 Knockout JS 使用      更新时间：2023-09-26

我的ViewModel中有两个可观测数组：

  • 入围国家
  • 公司主列表

所有公司名称都显示在下拉框中。下面列出了入围公司

我想通过这个演示实现两件事。

首先，用户应该能够从下拉列表中选择公司名称，并将其添加到入围公司列表中。

其次，如果用户试图入围已添加到入围公司列表中的公司，则应收到错误消息（或警报）。

请看一下我在JSFiddle 中的演示

HTML

<div>
    <div>All Companies</div>
    <div>
        <div id="rdoCompanyServer">
            <select data-bind="options:CompanyMainList, optionsText:'CompanyName', optionsValue:'id', optionsCaption: 'Select a company...'"></select>  <a href="#" data-bind="click:AddToShortlistedCountries">Add to Shortlist</a>
        </div>
    </div>
</div>
<br/>
<br/>
<br/>
<div>
    <div id="sectionHeading">My Shortlisted Companies</div>
    <div>
        <div>
            <ol data-bind="foreach: ShortlistedCountries">
                <li><span data-bind="text:CompanyName"></span><span id="removeshortlist">
                             <a href="#" data-bind="click: $parent.DeleteShortlistedCountries">Remove</a></span>
                </li>
            </ol>
            <br />
        </div>
    </div>
</div>

击倒JS

function CompanyViewModel() {
   var self = this;
   self.currentDemoLicenses = ko.pureComputed(function () {
       return self.demoLicenses().length;
   });


   /* adding bookmark servers in the same view TEST */
   self.bookmarkedServerCount = ko.pureComputed(function () {
       return self.ShortlistedCountries().length;
   });
   self.ShortlistedCountries = ko.observableArray([{
       CompanyName: 'Apple Inc',
       id: 11
   }, {
       CompanyName: 'TDK',
       id: 15
   }, {
       CompanyName: 'Samsung',
       id: 16
   }
   ]);
   self.DeleteShortlistedCountries = function (ShortlistedCountries) {
       self.ShortlistedCountries.remove(ShortlistedCountries);
   };

   self.AddToShortlistedCountries = function () {
       self.ShortlistedCountries.push(self.ShortlistedCountries);
   };

   self.CompanyMainList = ko.observableArray([{
       CompanyName: 'Acer',
       id: 1
   }, {
       CompanyName: 'Toshiba',
       id: 12
   }, {
       CompanyName: 'Sony',
       id: 13
   }, {
       CompanyName: 'LG',
       id: 14
   }, {
       CompanyName: 'HP',
       id: 6
   }, {
       CompanyName: 'Hitachi',
       id: 6
   }, {
       CompanyName: 'Apple Inc',
       id: 11
   }, {
       CompanyName: 'TDK',
       id: 15
   }, {
       CompanyName: 'Samsung',
       id: 16
   }, {
       CompanyName: 'Panasonic',
       id: 7
   }]);
};

$(document).ready(function () {
   ko.applyBindings(new CompanyViewModel());
});

看看我在JSFiddle 中的演示

如果我遗漏了什么，或者我的代码有什么问题，请告诉我。

谢谢。

致以亲切的问候。

Sid

试试这样的

视图模型：

       function CompanyViewModel() {
           var self = this;
           self.selectedCompany = ko.observable();//has dropdown selection
           self.ShortlistedCompanies = ko.observableArray([{
               CompanyName: 'Apple Inc',
               id: 11
           }, {
               CompanyName: 'TDK',
               id: 15
           }, {
               CompanyName: 'Samsung',
               id: 16
           }
           ]);
           var isExists = function (data) { //function checks for duplicates
               var status = false;
               ko.utils.arrayFirst(self.ShortlistedCompanies(), function (item) {
                   if (item.id === data.id) {
                       status = true;
                       return status;
                   }
               });
               return status;
           }
           self.DeleteShortlistedCompanies = function (ShortlistedCompanies) {
               self.ShortlistedCompanies.remove(ShortlistedCompanies);
           };

           self.AddToShortlistedCompanies = function () {
               if (!self.selectedCompany()) {
                   alert('select something');
                   return;
               }
               if (isExists(self.selectedCompany())) {
                   alert('Cannot add duplicates');
                   return;
               }
               self.ShortlistedCompanies.push(self.selectedCompany());
           };
           self.CompanyMainList = ko.observableArray([{
               CompanyName: 'Acer',
               id: 1
           }, {
               CompanyName: 'Toshiba',
               id: 12
           }, {
               CompanyName: 'Sony',
               id: 13
           }, {
               CompanyName: 'LG',
               id: 14
           }, {
               CompanyName: 'HP',
               id: 6
           }, {
               CompanyName: 'Hitachi',
               id: 6
           }, {
               CompanyName: 'Apple Inc',
               id: 11
           }, {
               CompanyName: 'TDK',
               id: 15
           }, {
               CompanyName: 'Samsung',
               id: 16
           }, {
               CompanyName: 'Panasonic',
               id: 7
           }]);
       };

视图：

 <div id="rdoCompanyServer">
        <select data-bind="options:CompanyMainList, optionsText:'CompanyName', optionsCaption: 'Select a company...',value:selectedCompany"></select>   <a href="#" data-bind="click:AddToShortlistedCompanies">Add to Shortlist</a>
 </div>

参考工作小提琴此处

相关文章：