Question

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

我使用PHP从数据库表中获取数据：

SELECT AddrPrintName,Tategaki,DefaultStamp FROM addrprint ORDER BY ListOrder

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

<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列告诉我复选框和广播组的所需默认选择状态，因此当选择的值更改（用户选择不同的布局）时，我想相应地设置复选框和广播组。我知道select元素上的onChange事件是最好的事件，但是我将把其他两个设置放在哪里？我是一个老式的程序员，15年前我会以某种方式将信息隐藏在选项值中，比如value="#3L (A4 tri)|1|betsunou"或者其他东西，但这是一个丑陋的kluge，并且在提交表单时需要清理代码。我可以在构建标记时定义一个Javascript数组，但这也很麻烦（特别是因为在HTML选择的中间不是脚本代码需要的地方，所以我必须在一个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>

但是显然选项标签没有我可以抓取的任何事件，所以它在整体选择上是onChange="someFunction()"，或者在jQuery中完成。但我不知道在哪里保留设置。将它们作为伪属性放在option标签中然后在jQuery事件处理程序中使用它们是否安全？（例如<option value="#3L (A4 tri)" kanji_numbers="1" stamp="betsunou">#3L (A4 tri)</option>）基本上，我的问题是：这些日子最常/最优雅的处理方式是什么？谷歌很难找到答案，因为我不知道目前要搜索的术语。

Answer 1

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

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

然后您可以使用Jquery作为

来阅读此值

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

在哪里记住onSelect

1 个答案: