如何在淘汰赛中选择控制选项赛事

时间:2016-04-02 08:52:03

标签: javascript html knockout.js

这里我提供了我的代码,我已经在选择中更改了事件,以便在淘汰赛中选择控制。 我是这个主题的新手,请帮助您从下拉列表/选择列表中更改选择时如何触发事件/方法。

HTML代码:

<select id="manufacturer" onchange="console.log('changed')" class="gray" data-bind="foreach: manufacturerList, optionsCaption: 'Manufacturer'">
   <option data-bind="attr: { value: $data.mid }, html: $data.mname"></option>
</select>

Js代码:

function memoryFilterData(data) {
    var self = this;
    self.mid = ko.observable(data.id);
    self.mname = ko.observable(data.name);
}

var Mfilterurl = "https://api.pcpartpicker.com/api/2015.1/part/category/filters/?apikey=5612661951b24c58979b7bb372c2a1f0809e2dc9&part_type=motherboard";
var MotherboardPcFilters = $.ajax({
    url: "services/PcPartpickerService.asmx/PcPartpickerList",
    type: "POST",
    data: "{ 'partlisturl' : '" + Mfilterurl + "'}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    error: function (data) {
        alert("Error");
    }
});
function categoryViewModel(tasks) {

    var self = this;

    self.manufacturerList = ko.observableArray([]);

    MotherboardPcFilters.done(function (allData) {
        var filterDoc = $.parseJSON(allData.d);
        for (var i = 0, len = filterDoc.filters.length; i < len; ++i) {
            var refInfo = filterDoc.filters[i];
            if (refInfo.parameter == "m") {
                manufacturers = refInfo.values;
            }
        }
        var manufacturer = $.map(manufacturers, function (item) { return new memoryFilterData(item) });
        self.manufacturerList(manufacturer);        
    })  
}

ko.applyBindings(new categoryViewModel(listOfTasks), document.getElementById("memoryFinder"));

2 个答案:

答案 0 :(得分:0)

你的方法已经发生了事件。请让你的问题更清楚。

<select onchange="console.log('changed')">
  <option >First</option>
  <option >Second</option>
  <option >Third</option>
</select>
Result

答案 1 :(得分:0)

在select的数据绑定中,你需要一个'value'属性来分配所选的值 - http://knockoutjs.com/documentation/value-binding.html

<select id="manufacturer"  
data-bind="foreach: manufacturerList, 
optionsCaption: 'Manufacturer', 
value:motherboardSelected">
    <option data-bind="attr: { value: $data.mid }, html: $data.mname"></option>
</select>

您可以通过执行类似 -

的操作订阅该活动
self.motherboardSelected.subscribe(function(newValue) {
    alert("The mobo selected is " + newValue);
});

我把它扔进了一个代码库 - http://codepen.io/dmoojunk/pen/JXrmRz