-1
我有兩個單選按鈕列表，允許選擇每個列表上的多個項目。這些列表是從使用AJAX調用調用的API數據動態生成的。爲什麼我的單選按鈕列表在列表中選擇多個項目？
正如你可以通過圖片見下圖：
JavaScript和HTML代碼：
\t function listUnitOfMeasureSet_change() {
\t if (listUnitOfMeasureSet.value.toString().toLowerCase() === "new") {
\t $("#divNewTypeUnitContentHolder").html("");
\t callService("GET", g_WebServiceUnitsOfMeasureTypeUnitsURL, null, "json", function(jsonResult) {
\t if (jsonResult.Success) {
\t for (i = 0; i < jsonResult.UnitOfMeasureTypeList.length; i++) {
\t $("#divNewTypeUnitContentHolder").html($("#divNewTypeUnitContentHolder").html() + '<input type="radio" id="rblUnitOfMeasureType" value="' + jsonResult.UnitOfMeasureTypeList[i].ID + '" /> ' + jsonResult.UnitOfMeasureTypeList[i].Name + ' ' + jsonResult.UnitOfMeasureTypeList[i].Description + '<br />');
\t }
\t }
\t });
\t $("#divNewUnitOfMeasure").dialog("open");
\t }
\t }
\t $("#divNewUnitOfMeasureBaseUnit").dialog({
\t autoOpen: F,
\t modal: T,
\t title: "Unit Of Measure",
\t width: 600,
\t buttons: {
\t Next: function() {
\t $(this).dialog("close");
\t $("#divNewUnitOfMeasureRelatedUnits").dialog("open");
\t callService("GET", g_WebServiceUnitsOfMeasureRelatedUnitsGetAllByBaseUnitIDURL + '?BaseTypeID=' + $("input[type='radio'][id='rblUnitOfMeasureBaseUnit']:checked").val(), null, "json", function(jsonResult) {
\t if (jsonResult.Success) {
\t var data = {};
\t for (var i = 0; i < jsonResult.UnitOfMeasureRelatedUnitList.length; i++) {
\t var row = {};
\t row["UOMRelatedUnit_AddItem"] = F;
\t row["UOMRelatedUnit_Abbreviation"] = jsonResult.UnitOfMeasureRelatedUnitList[i].Abbreviation;
\t row["UOMRelatedUnit_Active"] = jsonResult.UnitOfMeasureRelatedUnitList[i].Active;
\t row["UOMRelatedUnit_ConversionOfBaseUnits"] = jsonResult.UnitOfMeasureRelatedUnitList[i].ConversionOfBaseUnits;
\t row["UOMRelatedUnit_DisplayOrder"] = jsonResult.UnitOfMeasureRelatedUnitList[i].DisplayOrder;
\t row["UOMRelatedUnit_ID"] = jsonResult.UnitOfMeasureRelatedUnitList[i].ID;
\t row["UOMRelatedUnit_Name"] = jsonResult.UnitOfMeasureRelatedUnitList[i].Name;
\t row["UOMRelatedUnit_UnitOfMeasureBaseUnitID"] = jsonResult.UnitOfMeasureRelatedUnitList[i].UnitOfMeasureBaseUnitID;
\t data[i] = row;
\t }
\t var source = {
\t localdata: data,
\t datatype: "array",
\t datafields: [{
\t name: 'UOMRelatedUnit_ID',
\t type: 'string'
\t }, {
\t name: 'UOMRelatedUnit_AddItem',
\t type: 'bool'
\t }, {
\t name: 'UOMRelatedUnit_Name',
\t type: 'string'
\t }, {
\t name: 'UOMRelatedUnit_Abbreviation',
\t type: 'string'
\t }, {
\t name: 'UOMRelatedUnit_ConversionOfBaseUnits',
\t type: 'number'
\t }],
\t addrow: function(rowid, rowdata, position, commit) {
\t //Server Action
\t commit(T);
\t },
\t updaterow: function(rowid, newdata, commit) {
\t //Server Action
\t commit(T);
\t }
\t };
\t var dataAdapter = new $.jqx.dataAdapter(source);
\t $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid({
\t width: 500,
\t height: 200,
\t source: dataAdapter,
\t editable: T,
\t selectionmode: 'singlecell',
\t theme: 'energyblue',
\t showtoolbar: T,
\t rendertoolbar: function(toolbar) {
\t var me = this;
\t var container = $("<div style='margin: 5px;'></div>");
\t toolbar.append(container);
\t container.append('<input id="addUoMRelatedUnitsRowButton" type="button" value="Add New Row" />');
\t container.append('<input style="margin-left: 5px;" id="addUoMRelatedUnitsMultipleRowsButton" type="button" value="Add Multiple New Rows" />');
\t $("#addUoMRelatedUnitsRowButton").jqxButton();
\t $("#addUoMRelatedUnitsMultipleRowsButton").jqxButton();
\t // create new row.
\t $("#addUoMRelatedUnitsRowButton").on('click', function() {
\t $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('beginupdate');
\t var commit = $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('addrow', null, ['']);
\t $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('endupdate');
\t });
\t // create new rows.
\t $("#addUoMRelatedUnitsMultipleRowsButton").on('click', function() {
\t $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('beginupdate');
\t for (var i = 0; i < 5; i++) {
\t var commit = $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('addrow', null, ['']);
\t }
\t $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('endupdate');
\t });
\t },
\t columns: [{
\t text: '',
\t editable: F,
\t datafield: 'UOMRelatedUnit_ID',
\t width: 0
\t }, {
\t text: 'Add',
\t editable: T,
\t datafield: 'UOMRelatedUnit_AddItem',
\t columntype: 'checkbox',
\t width: 40
\t }, {
\t text: 'Name',
\t editable: T,
\t datafield: 'UOMRelatedUnit_Name',
\t columntype: 'textbox',
\t width: 200
\t }, {
\t text: 'Abbreviation',
\t editable: T,
\t datafield: 'UOMRelatedUnit_Abbreviation',
\t columntype: 'textbox',
\t width: 100
\t }, {
\t text: '# of Base Unit',
\t editable: T,
\t datafield: 'UOMRelatedUnit_ConversionOfBaseUnits',
\t columntype: 'textbox',
\t width: 100
\t }]
\t });
\t // select or unselect rows when the checkbox is checked or unchecked.
\t $("#jqxUOMRelatedUnitsDropdownGrid").bind('cellendedit', function(event) {
\t if (event.args.value) {
\t $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('selectrow', event.args.rowindex);
\t } else {
\t $("#jqxUOMRelatedUnitsDropdownGrid").jqxGrid('unselectrow', event.args.rowindex);
\t }
\t });
\t }
\t });
\t },
\t Back: function() {
\t $(this).dialog("close");
\t $("#divNewBaseUnitContentHolder").html('');
\t $("#divNewUnitOfMeasure").dialog("open");
\t },
\t Cancel: function() {
\t $(this).dialog("close");
\t }
\t }
\t });<div id="divNewUnitOfMeasure">
<strong>Select a Unit of Measure Type</strong>
<br />If you don't see the Unit of Measure type you need, select Other to create a new one.
<br />
<div id="divNewTypeUnitContentHolder"></div>
</div>
<div id="divNewUnitOfMeasureBaseUnit">
<strong>Select a Base Unit of Measure</strong>
<br />
<table style="width: 100%;">
<tr>
<td style="width: 100px; display: table-cell; vertical-align: top;">
<div id="divNewBaseUnitContentHolder"></div>
</td>
<td style="width: 200px; display: table-cell; vertical-align: top;">
When you create inventory items, the base unit of measure should be the smallest increment used to track the item.
<br />
<br />For example, if you buy screws in bags of 100 but use one or two at a time, you should select a base unit of "each" instead of "1 bag of 100."
</td>
</tr>
</table>
</div>