Question

我有一个表，其中一列是选择的。相同的选项，但selected可能会有所不同。我希望按钮更新选择更新选项的位置，但

所选选项将保持不变
选项将被排序
整个页面不会刷新
只想使用纯javascript

我不知道如何

循环所有选择在一列内
循环选择
在右侧（已排序）广告位置插入新选项

<html>
<body>

<table id="t0" border="1">
<tr><td>Cars<input type="button" value="update selects" onClick="update_selects;"></td></tr>

<tr>
<td><select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" >Fiat</option>
<option value="skoda" selected="selected">Skoda</option>
</select></td>

</tr>
<tr>
<td><select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="skoda">Skoda</option>
</select></td>
</tr>
</table>
</body>
</html>

Answer 1

你要求做很多事情，所以最好先解决问题并创建功能来完成每个部分。要从表中的特定列获取所有选择元素：

// Return an array of the select elements in 
// a column of a table
function getSelectsInColumn(table, colIndex) {
  var rows = table.rows; // rows collection
  var selects = [];      // for references to select elements
  var s, cell;

  for (var i=0, iLen=rows.length; i<iLen; i++) {
    cell = rows[i].getElementsByTagName('td')[colIndex];

    if (cell) {
      s = cell.getElementsByTagName('select');
      for (var j=0, jLen=s.length; j<jLen; j++) {
        selects.push(s[j]);
      }
    }
  }
  return selects;
}

您没有说明如何创建或添加新选项，但使用以下内容添加新选项非常简单：

select.options[select.options.length] = new Option(text, value);

这将在底部添加一个选项，而不是更改当前选择的选项。它使用旧的DOM 0方法，因为这是最可靠和最健壮的方法。

要对选项进行排序，通常的策略是将文本放入数组中，同时创建一个对象，其中选项text作为属性键，并将选项引用为值。始终附加一个额外的值以确保属性名称是唯一的（此值仅用作键，额外值仅确保唯一性，不应影响排序顺序）。

然后对数组进行排序并使用它来重新排序选项，例如

// Sort options of a select, keep
// selected option selected
function sortOptions(selectElement) {
  var textArray = []; 
  var optionsObj = {};
  var opts = selectElement.options;
  var o, t;

  // Use a clone to move options to - needed as IE
  // doesn't like to shift them in place
  var sortedSelect = selectElement.cloneNode(false);
  var selectedOpt;

  for (var i=0, iLen=opts.length; i<iLen; i++) {
    o = opts[i];
    t = o.text + '-' + i;
    textArray.push(t);
    optionsObj[t] = o;

    // Remember selected option
    if (o.selected) {
      selectedOpt = o;
    }
  }

  // Simple sort
  textArray.sort();

  // Move options to cloned select in order
  for (var j=0, jLen=textArray.length; j<jLen; j++) {
    sortedSelect.appendChild(optionsObj[textArray[j]]);
  }

  // Replace original select with cloned select that has
  // options in order
  selectElement.parentNode.replaceChild(sortedSelect, selectElement);

  // Restore selected option
  selectedOpt.selected = true;
}

最后一件事是将上述内容联系在一起的功能：

function sortSelects(table, colIndex) {
  var selects = getSelectsInColumn(table, colIndex);
  for (var i=0, iLen=selects.length; i<iLen; i++) {

    // add extra options here before sorting
    // ...

    // Now sort
    sortOptions(selects[i]);
  }
}

以上使用基本的DOM内容并在Firefox和IE中进行测试，因此几乎无处不在。

要启动它，请使用对表和列索引的引用调用sortSelects（注意列为零索引，因此第一个为0，第二个为1，依此类推）：

sortSelects(document.getElementById('t0'),0)

更新所有选择html中的列

1 个答案: