关于保存select的值如何保存：

Posted 2023-03-20

<form name="form1" metion="post">
<select name="sel">
<option value="0">时间排序</opton>
<option value="1">大小排序</opton>
<option value="2">名称排序</opton>
</select>
......
.......(这里是显示查询结果和实现翻页的的代码)
</form>

附：假如通过数据查询显示的记录有100条，每页显示20条记录（共5页），当我选择的是大小排序时，而翻页到第2页，显示的记录结果也是按大小排序的。请各位大侠指点迷经！
metion="post" 不好意思，我写错了，是method="post"

参考技术A 最笨的方法就是选择了一个option后也把这个option的值传到后台，处理完后把option的值再传到前台，赋值到sel。每次翻页也把option值传到后台......追问

大哥，我的select使用的是无刷新方法,使结果显示出来。而翻页不是使用无刷新的方式。你这种…………

参考技术B 用Session 保存
网页用<% %>引用
Session("SEL")=request("Sel")

页面上引用
<option value="0" <%if Session("SEL")=0 then response.write "checked" %>>时间排序</opton>
忘了是selected 还是checked - -!追问

不好意思，我的是php的，虽然我能看懂你写的是asp.也明白你思想，但如果我一开始选择的是大小排序，翻到第2页，而后我改变为名称排序，页面是停流在第几页，排序是怎么样？之后我又翻到第3页，显示的结果是怎么样

追答

保存每次的页码
每提交一次实际上数据又重新排列了一次。如果排序方式改变你应该重置到第一页去。如果没改变排序方式则按实际翻页显示当前要显示的页

将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值

【中文标题】将 HTML-Select 附加到输入并在用户单击“保存”按钮后存储它们的值

【英文标题】：attach HTML-Select to Inputs and store them values once user click Save button

【发布时间】：2016-03-21 02:59:18

【问题描述】：

我正在处理使用纯 Javascript 从复选框列表中获取值，其中每个复选框都有一个选择字段。

我有这个 HTML（带有三个复选框示例）

  <section class="options-list">
    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-01" id="cb-01" name="checkboxStatus"/>
      <label for="cb-01">Page Load Time</label>

      <select id="type-01" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-02" id="cb-02" name="checkboxStatus"/>
      <label for="cb-02">DB Query</label>

      <select id="type-02" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <div>
      <input type="checkbox" class="cb" value="valueForCheckbox-03" id="cb-03" name="checkboxStatus"/>
      <label for="cb-03">Server Response Time</label>

      <select id="type-03" name="optionSelected">
        <option value="001">001</option>
        <option value="002">002</option>
        <option value="003">003</option>
        <option value="004">004</option>
      </select>
    </div>

    <input type="button" id="save-data" value="Save" onclick="userChoice('checkboxStatus', 'optionStatus')"/>
  </section>

以下 JS 正在工作以获取选中的元素

var checkboxes = [];

function userChoice(checkboxName, options) 

  checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), cbSelected = [];

  Array.prototype.forEach.call(checkboxes, function(el) 
    cbSelected.push(el.value);
    return cbSelected;
  );

  return cbSelected;

我不确定这是否是最好的方法，但剩下的部分是获取选项值并链接到复选框。

最后我不确定存储这些数据的最佳方式，你有什么建议？数组数组？... [[checkboxSelected.value, option.value][checkboxSelected.value, option.value]]

...对象数组... [state: "checked", option: valuestate: "checked", option: value]

..或者可能是另一个想法

【参考方案1】：

您可以通过引用每个复选框来获得选择。类似于cbSelected.parentNode.querySelector('select')。我个人会使用对象数组来存储数据，但也可以使用数组数组，或者将对象用作地图。

var model1 = [
    
        'type' : 'checkbox',
        'id' : '01',
        'checked' : true
    ,
    
        'type' : 'select',
        'id' : '01',
        'value' : 002
    
];

var model2 = 
    '01' : 
        'checkbox' : true,
        'option' : '002'
    ,
    '02' : 
        'checkbox' : false,
        'option' : 'default'
    
;

【讨论】：

感谢您的回复，这样就可以有一个 HTML 选择兄弟，对吗？我可以将 getElementsByClassName 或 ById 与 parentNode 一起使用，而不是使用 querySelector 吗？只是我不知道将来我是否需要另一个 ，但在那种情况下，我只想避免所有崩溃：D

你可以使用任何你想要的选择器，但我已经养成了使用 querySelector 和 querySelectorAll 的习惯，而不是 getElementByXXX，因为你可以在 querySelector 中使用的 css 选择器更具表现力.这让我可以删除很多我曾经需要的 id 和类，只是为了有效地选择一个节点。

但是使用 querySelector(" ") 我们定位所有标签对吗？就像在 TagName 中一样，所以我认为它很危险（可能我错了）

querySelector 为您提供第一个匹配的节点，querySelectorAll 将为您提供包含所有匹配项的 nodeList（类似数组的对象）。因此 querySelectorAll('.my-name') 将获取所有具有类 'my-name' 的元素，因此等效于 getElementsByClassName('my-name') 不同之处在于 getElementXXX 提供了一个实时的 htmlcollection 和 querySelector 将接受复杂的 css 选择器，如“table.myClass td:first-child > span.otherClass”等，因此您可以使用您在 css 文件中使用的选择器。更多信息：developer.mozilla.org/nl/docs/Web/API/Document/querySelector

太棒了！我不知道我可以使用 css 伪选择器。非常感谢。