在哪里记住 onSelect 所需的值

Question

老派程序员询问在现代如何最好地做某事...

我使用 PHP 从数据库 table 中获取数据，如下所示：

SELECT AddrPrintName,Tategaki,DefaultStamp FROM addrprint ORDER BY ListOrder

我使用基于 AddrPrintName（打印布局名称）的选项构建了一个 select，如下所示：

<select name="addr_print_name" size="1">
   <option value="#3L (A4 tri)">#3L (A4 tri)</option>
   <option value="#6 (A5) Rainbow Club">#6 (A5) Rainbow Club</option>
   <option value="はがき">はがき</option>
   <option value="年賀状">年賀状</option>
   <option value="角形3号 (B5) Rainbow Club">角形3号 (B5) Rainbow Club</option>
</select>

我还有两个这样的表单元素：

<label><input type="checkbox" value="yes" name="kanji_numbers" id="kanji_numbers">Use kanji for numbers</label>
<h4>Post office stamp:</h4>
<input type="radio" name="po_stamp" id="stamp_none" value="none">None<br />
<input type="radio" name="po_stamp" id="stamp_betsunou" value="betsunou">Standard mail<br />
<input type="radio" name="po_stamp" id="stamp_yuumail_betsunou" value="yuumail_betsunou">'Yuu-mail'<br />
<input type="radio" name="po_stamp" id="stamp_kounou" value="kounou">Standard mail w/ contract<br />
<input type="radio" name="po_stamp" id="stamp_yuumail_kounou" value="yuumail_kounou">'Yuu-mail' w/ contract

Tategaki 和 DefaultStamp 列告诉我复选框和单选组所需的默认 selection 状态，因此当 select 的值更改时（用户选择不同的布局），我想相应地设置复选框和单选组。我知道 select 元素上的 onChange 事件是最好使用的事件，但是我应该把其他两个设置放在哪里？我是一个老派的编码员，15 年前我会以某种方式将信息隐藏在选项值中，例如 value="#3L (A4 tri)|1|betsunou" 或其他东西，但这是一个丑陋的问题，并且在提交表单时需要清理代码。我可以在构建标记时定义一个 Javascript 数组，但这也很麻烦（特别是因为 HTML select 的中间不是脚本代码需要的地方是，所以我必须将它构建在 PHP 字符串中并稍后回显）。我希望我能做这样的事情来把所有东西都放在一个地方（白日梦的伪代码，因为我知道没有这样的事件）：

<option value="#3L (A4 tri)" onChangedToMe="document.getElementById("kanji_numbers").checked = true; document.getElementById("stamp_betsunou").checked = true;">#3L (A4 tri)</option>
<option value="#6 (A5) Rainbow Club" onChangedToMe="document.getElementById("kanji_numbers").checked = false; document.getElementById("stamp_yuumail_betsunou").checked = true;">#6 (A5) Rainbow Club</option>

但显然选项标签没有任何我可以抓取的事件，所以它要么在 select 总体上 onChange="someFunction()"，要么在 jQuery 中全部完成。但我不知道在哪里保存设置。将它们作为假属性放在选项标签中，然后在 jQuery 事件处理程序中使用它们是否安全？（例如 <option value="#3L (A4 tri)" kanji_numbers="1" stamp="betsunou">#3L (A4 tri)</option>）基本上，我的问题是：这些天大多数 commonly/elegantly 这种事情是如何处理的？很难google找到答案，因为我不知道要搜索的当前术语。

Answer 1

您可以使用 HTML 5 data 个属性来实现此目的

<option value="#3L (A4 tri)" data-kanji-numbers="1" data-stamp="betsunou">#3L (A4 tri)</option>

然后你可以使用 Jquery as

读取这个值

$('select option:selected').data("kanjiNumbers") //returns 1
$('select option:selected').data("stamp") //returns betsunou

在哪里记住 onSelect 所需的值

Where to remember values needed for onSelect

javascript

jquery

html

forms

html-select