补全页:活动改成和类别同款下拉,两列样式一致

活动原本是 input+datalist、类别是 select,同在一行列里长得不一样,看着别扭。
现在两者共用同一套写法:下拉 + 末尾「其它(自己写)…」+ 选中后露出的文本框
(后端 act_<id>==__custom__ 时读 act_<id>__custom,与类别同一套约定)。
CSS 类也合成一个 fill-sel,脚本只需遍历一次。

顺带:删掉不再需要的 datalist;采纳建议、草稿存取都改走 select.fill-sel。
草稿恢复时对下拉派发 change,所以「其它」的文本框也能跟着恢复显示。
This commit is contained in:
tamakyi
2026-09-19 23:46:02 +08:00
parent 5aeded2d51
commit bf23fc62d7
3 changed files with 58 additions and 19 deletions
+15 -17
View File
@@ -52,14 +52,21 @@
<td data-label="缺什么">{{$row.Missing}}</td>
<td data-label="活动">
{{if $row.NoAct}}
<input list="fill-act" name="act_{{$row.PlaceID}}" value=""
placeholder="(不动)" data-hint="{{$row.ActHint}}" style="min-width:8em">
{{$ahint := $row.ActHint}}
<select name="act_{{$row.PlaceID}}" class="fill-sel" data-hint="{{$ahint}}" style="min-width:10em">
<option value="">(不动)</option>
{{if $ahint}}<option value="{{$ahint}}">建议:{{$ahint}}</option>{{end}}
{{range $.Activities}}{{if ne .Name $ahint}}<option value="{{.Name}}">{{.Name}}</option>{{end}}{{end}}
<option value="__custom__">其它(自己写)…</option>
</select>
<input type="text" name="act_{{$row.PlaceID}}__custom" placeholder="例如 爬山"
style="display:none;margin-top:4px;min-width:10em">
{{else}}<span class="muted">—</span>{{end}}
</td>
<td data-label="类别">
{{if $row.NoCat}}
{{$hint := $row.CatHint}}
<select name="cat_{{$row.PlaceID}}" class="cat-sel" data-hint="{{$hint}}">
<select name="cat_{{$row.PlaceID}}" class="fill-sel" data-hint="{{$hint}}" style="min-width:10em">
<option value="">(不动)</option>
{{if $hint}}<option value="{{$hint}}">建议:{{catName $hint}}</option>{{end}}
{{range $.Categories}}{{if ne .Value $hint}}<option value="{{.Value}}">{{.Label}}</option>{{end}}{{end}}
@@ -103,16 +110,12 @@
{{end}}
</div>
<datalist id="fill-act">
{{range .Activities}}<option value="{{.Name}}"></option>{{end}}
</datalist>
<script>
(function () {
var KEY = 'rond-fillup-draft';
// 选了「其它(自己写)」就露出旁边的文本框
document.querySelectorAll('select.cat-sel').forEach(function (sel) {
// 活动和类别是同一套下拉:选了「其它(自己写)」就露出旁边的文本框
document.querySelectorAll('select.fill-sel').forEach(function (sel) {
var box = document.querySelector('input[name="' + sel.name + '__custom"]');
if (!box) return;
var sync = function () {
@@ -124,17 +127,12 @@
sync();
});
// 采纳本页建议:活动按 data-hint 填进输入框,类别把建议项选上
// 采纳本页建议:把建议项选上(活动和类别都是下拉)
var pick = document.getElementById('pick-hints');
if (pick) {
pick.addEventListener('click', function () {
var n = 0;
document.querySelectorAll('input[name^="act_"]').forEach(function (inp) {
if (inp.value || !inp.dataset.hint) return;
inp.value = inp.dataset.hint;
n++;
});
document.querySelectorAll('select.cat-sel').forEach(function (sel) {
document.querySelectorAll('select.fill-sel').forEach(function (sel) {
if (sel.value || !sel.dataset.hint) return;
sel.value = sel.dataset.hint;
n++;
@@ -147,7 +145,7 @@
// 否则挑了半天,点一下就全没了。
var save = function () {
var draft = {};
document.querySelectorAll('input[name^="act_"], input[name$="__custom"], select.cat-sel').forEach(function (el) {
document.querySelectorAll('select.fill-sel, input[name$="__custom"]').forEach(function (el) {
if (el.value) draft[el.name] = el.value;
});
try { sessionStorage.setItem(KEY, JSON.stringify(draft)); } catch (e) { /* 隐私模式就算了 */ }