下拉列表將接受不屬於列表中的值的列表

輸入電子郵件地址時，用戶必須從預定義列表（例如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

謝謝。有效：] –

下拉列表將接受不屬於列表中的值的列表

回答

相關問題