首页 > 编程语言> 文章详细

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

2019-11-21 11:35:38 阅读：196 来源： 互联网

标签：knockout-js html arrays javascript

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

但是,“采样率”选择的每个值只能使用一次.例如,默认情况下,第一个表单设置为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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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