首页 > 编程语言> > javascript-淘汰赛：从数组中删除选择选项(已在使用中)

javascript-淘汰赛：从数组中删除选择选项(已在使用中)

2019-11-21 11:35:38 作者：互联网

我有一个淘汰赛表格,可以使用按钮复制该表格,以提供多组数据.

但是,“采样率”选择的每个值只能使用一次.例如,默认情况下,第一个表单设置为192000.因此,当我单击“添加速率元素”时,生成的表单不应在“采样率”下拉列表中包含192000作为选项.

显然,如果将第一种形式的“采样率”设置为其他值,则应为第二种形式除去该值,依此类推.

添加新表单后,如何从数组中删除已选择的采样率,以使其在该表单的其他副本中不可用？给定视图模型的结构,甚至可能吗？

这里有一个小提琴：http://jsfiddle.net/3lliot/x3cg131g/

已经包含一些逻辑来防止超过6种形式.

任何提示将不胜感激…

HTML代码：

<body>
   <ul data-bind="foreach: forms">
      <li>
         <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
         <p><span style="color:#AB0002">Sample rate element <span data-bind="text: formNum"></span></span>
         </p>
         <p>Sample rate (Hz):
            <select data-bind="options: $parent.sampleRate, value: selectedSampleRate"></select>
         </p>
         <p>TDM channels per line:
            <select data-bind="options: tdmChans, value: selectedTdmchan"></select>
         </p>
      </li>
   </ul>
   <button data-bind="click: addForm">Add &lt;srate&gt; element</button>
   <button data-bind="click: removeForm">Remove</button>
   <hr/>
   <ul data-bind="foreach: forms">
      <li>
         <!-- render the json -->
         <p class="code">&lt;srate id="<span data-bind="text: formNum"></span>"&gt;
            <br/>&nbsp;&nbsp;&lt;sample_rate&gt;<span data-bind="text: selectedSampleRate"></span>&lt;&#47;sample_rate&gt;
            <br/>&nbsp;&nbsp;&lt;tdm_chan&gt;<span data-bind="text: selectedTdmchan"></span>&lt;&#47;tdm_chan&gt;
            <br/>
         </p>
      </li>
   </ul>
</body>

JS代码：

window.onload = startKnockout;
var formNum;
var i = -1;    

function Form() {
    var self = this;

    // Declare observables
    self.selectedSampleRate = ko.observable();
    self.selectedTdmchan = ko.observable();
    self.formNum = ko.observable();

    // Define controls
    self.tdmChans = ko.computed(function() {
        if (self.selectedSampleRate() == 44100 || self.selectedSampleRate() == 48000) {
            return ['2', '4', '8', '16'];
        } else if (self.selectedSampleRate() == 88200 || self.selectedSampleRate() == 96000) {
            return ['2', '4', '8'];
        } else if (self.selectedSampleRate() == 176400 || self.selectedSampleRate() == 192000) {
            return ['2', '4'];
        } else {
            // do nothing
        }
    }, self);
    i++;
    self.formNum = i;
}

var Vm = function() {
    var self = this;
    var item = 0;

    self.forms = ko.observableArray([]);
    self.forms.push(new Form());
    item++;
    self.addForm = function() {
        if (i < 5) {
            self.forms.push(new Form());
            item++;

        } else {
            alert("Can't have more than 6 <srate> elements!")
        }
    };
    self.removeForm = function() {
        if (item > 1) {
            self.forms.splice(item - 1, 1);
            item--;
            i--;
        } else {
            alert("Must have at least one <srate> element!")
        }
    };

    self.sampleRate = ko.observableArray(['192000', '176400', '96000', '88200', '48000', '44100']);
    return self;
}

// Activates knockout.js
function startKnockout() {
    ko.applyBindings(new Vm());
};

解决方法:

看看这个：

http://jsfiddle.net/martinbooth/x3cg131g/1/

重要的是,根据以其他形式选择的内容计算可用的采样率：

self.sampleRates = ko.computed(function(){
    var formsValue = forms(),
        availableSampleRates = ko.utils.arrayFilter(allSampleRates, function(sampleRate){
            return !ko.utils.arrayFirst(formsValue, function(form){
                return form != self && form.selectedSampleRate() === sampleRate;
            });
    });

    return availableSampleRates;
});

标签：knockout-js,html,arrays,javascript
来源： https://codeday.me/bug/20191121/2051512.html