Javascript 在html中更新列中的所有选择_Javascript_Html

Javascript 在html中更新列中的所有选择
javascript html
Javascript 在html中更新列中的所有选择,javascript,html,Javascript,Html,我有一个表，其中一列是选择的。相同的选项，但所选的可能会有所不同。我想有一个按钮更新选择的选项将被更新，但所选选项将保持不变选项将被排序整个页面将不会刷新只想使用纯javascript吗我不知道该怎么做在一列中循环所有选择在一个选择中循环所有选项在右侧（已排序）位置插入新选项或以下 <html> <body> <table id="t0" border="1"> <tr><td>Cars<input t
我有一个表，其中一列是选择的。相同的选项，但所选的
可能会有所不同。我想有一个按钮更新选择的选项将被更新，但

所选选项将保持不变
选项将被排序
整个页面将不会刷新
只想使用纯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> 


汽车
沃尔沃汽车
萨博
法令
斯柯达
沃尔沃汽车
萨博
法令
斯柯达
您需要做很多事情，因此最好将问题分解并创建函数来完成每个部分。要从表中的特定列中获取所有select元素，请执行以下操作：
// 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;
}

这将在底部添加一个选项，而不会更改当前选定的选项。它使用旧的dom0方法，因为这是最可靠、最健壮的方法
要对选项进行排序，通常的策略是将文本放入数组，同时创建一个对象，将选项文本作为属性键，并将对选项的引用作为值。始终附加一个额外值以确保属性名称唯一（此值仅用作键，额外值仅确保唯一性，不应影响排序顺序）
然后对数组进行排序，并使用它对选项重新排序，例如
// 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;
}

您需要很多东西，因此最好将问题分解并创建函数来完成每个部分。要从表中的特定列中获取所有select元素，请执行以下操作：
// 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;
}

这将在底部添加一个选项，而不会更改当前选定的选项。它使用旧的dom0方法，因为这是最可靠、最健壮的方法
要对选项进行排序，通常的策略是将文本放入数组，同时创建一个对象，将选项文本作为属性键，并将对选项的引用作为值。始终附加一个额外值以确保属性名称唯一（此值仅用作键，额外值仅确保唯一性，不应影响排序顺序）
然后对数组进行排序，并使用它对选项重新排序，例如
// 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;
}

谢谢你@Rob，试着理解你的代码。。。。第一个函数中的selects是一个数组，其中每个元素都包含“整个select”。是这样吗？您能给我一个例子，如何调用其中一个参数为table
的任何函数吗？我应该用什么替换表
？我已经在代码中添加了一些注释和额外的解释。是，selects是用于选择元素的引用数组。table参数是对table元素的引用，类似于getElementById（tableId）@Rob:works！：-）的结果非常感谢。是否要更新select.options[select.options.length]=新选项（文本、值）？您使用everywhereselects
not selects还有一个问题：如果我在添加新选项后显示页面html代码，我将不会在代码中看到该新选项。只有原版的。有什么解释吗？谢谢@Rob，试着理解你的代码。。。。第一个函数中的selects是一个数组，其中每个元素都包含“整个select”。是这样吗？您能给我一个例子，如何调用其中一个参数为table
的任何函数吗？我应该用什么替换表
？我已经在代码中添加了一些注释和额外的解释。是，selects是用于选择元素的引用数组。table参数是对table元素的引用，类似于getElementById（tableId）@Rob:works！：-）的结果非常感谢。是否要更新select.options[select.options.length]=新选项（文本、值）？您使用everywhereselectsnot selects还有一个问题：如果我在添加新选项后显示页面html代码，我将不会在代码中看到该新选项。只有原版的。有什么解释吗？
sortSelects(document.getElementById('t0'),0)