下拉列表将接受不属于列表中的值的列表

输入电子邮件地址时，用户必须从预定义列表（例如gmail）中选择电子邮件地址域。 com; outlook.com; hotmail.com）。下拉列表将接受不属于列表中的值的列表

域下拉列表将接受不属于列表的一部分的值。

我应该有选择和输入功能。

HTML：

<!-- Mulitple array of emails --> 
    <div> 
     <table class="table table-bordered"> 
      <tbody data-bind='foreach: billDeliveryEmails'> 
      <tr> 
       <td><input class='required' data-bind='value: userName' /></td> 
       <td><select data-bind="options: $root.availableEmailDomains(), value: domainName, optionsText: 'domainName', optionsValue: 'domainName'"></select></td> 
       <td><a data-bind="click:'removeDeliveryEmailAddress'">Delete</a></td> 
      </tr> 
      </tbody> 
     </table> 
     <a class="atm-bloque-link" data-bind="click:'addDeliveryEmailAddress'">Agregue otra direccion de email</a> 
    </div>

VM：

//域类

function Domain(domainName) { 
      var self = this; 
      self.domainName = domainName; 
      } 

    billDeliveryEmails : [], 
availableEmailDomains : ko.observableArray([ 
     new Domain("hotmail.com"), 
     new Domain("yahoo.com") 
    ]) 


    addDeliveryEmailAddress: function ($element, data, context, bindingContext, event) { 

      bindingContext.$root.billDeliveryEmails.push({ 
       userName: "", 
       domainName: this.viewModel.get('availableEmailDomains')[0] 
      }); 

      event.preventDefault(); 
     }, 

     removeDeliveryEmailAddress: function ($element, data, context, bindingContext, event) { 

      bindingContext.$root.billDeliveryEmails.splice(0, 1) 
      event.preventDefault(); 
     }

来源

2017-04-21 Deepak Negi

如果有人下降了，他能否说出原因。因为这是我遇到的要求，无法找到谷歌解决方案。 –

你到目前为止有什么？您是否熟悉[observableArrays]（http://knockoutjs.com/documentation/observableArrays.html）的工作方式？ –

哪个输入是应添加到可用电子邮件列表中的输入？看起来你有一个添加到'billDeliveryEmails'的输入，但没有添加到'availableEmailDomains'的输入。将项目推入'availableEmailDomains'observableArray应自动更新选择列表UI。 –

根据您的评论的链接，这里有一个例子：

function Domain(domainName) { 
 
    var self = this; 
 
    self.domainName = domainName; 
 
} 
 
      
 
var vm = function() { 
 
\t var self = this; 
 
\t self.browser = ko.observable(); 
 
    self.browserList = ko.observableArray([ 
 
    \t new Domain('yahoo.com'), 
 
    new Domain('hotmail.com') 
 
    ]) 
 
}(); 
 

 
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<label>Choose a browser from this list: 
 
<input list="browsers" name="myBrowser" data-bind="value: browser" /></label> 
 
<datalist id="browsers" data-bind="foreach: browserList"> 
 
    <option data-bind="text: domainName"> 
 
</datalist> 
 

 
<br /> 
 
Your browser is: <span data-bind="text: browser"></span>

可观察数组用于填充列表，常规可观察数组用于跟踪选定值。

来源

2017-04-25 01:07:58

谢谢。有效：] –

下拉列表将接受不属于列表中的值的列表

回答

相关问题