我目前有一个 Blogger 搜索功能,该功能通过在表单中具有下拉/数据列表值来模拟 Blogger 标签(在此处预览)。当您点击“搜索”时,脚本会生成一个带有用户通过简短形式选择的值(标签)的 URL,并立即转到该链接,如下所示:
<script>
function process()
{
var url="http://couleurstransmogrify.blogspot.com.au/search/label/" + document.getElementById("Colour").value + "+" + document.getElementById("Item").value + "+" + document.getElementById("Class").value;
location.href=url;
return false;
}
</script>
<div id="SearchBox">
<div style="padding-bottom:3px;"><font color="#000000">Search</font>ing is as easy as 1, 2, 3...</div>
<form onsubmit="return process();">
<input type="text" name="Colour" id="Colour" value="COLOUR" list="datalist1" onfocus="if(this.value == 'COLOUR'){this.value = '';}" onblur="if(this.value == ''){this.value='COLOUR';}" />
<input type="text" name="Item" id="Item" value="ITEM" list="datalist2" onfocus="if(this.value == 'ITEM'){this.value = '';}" onblur="if(this.value == ''){this.value='ITEM';}" />
<input type="text" name="Class" id="Class" value="CLASS" list="datalist3" onfocus="if(this.value == 'CLASS'){this.value = '';}" onblur="if(this.value == ''){this.value='CLASS';}" /><br />
<input type="submit" id="Search" value="SEARCH" />
</form>
<datalist id="datalist1">
<option value="All" />
</datalist>
<datalist id="datalist2">
<option value="All" />
</datalist>
<datalist id="datalist3">
<option value="All" />
</datalist>
</div>
这一切都很好,但我想在表单中添加另一个函数,其中包括一个单选按钮值(或一个复选框值,更简单的)。
目标是:
a >>>>有两个单选按钮,其值为“动画”和“全部”。根据选择的单选按钮,值将添加到 URL 的末尾,例如 (URL)/search/label/All+All+All+Animated * OR (URL)/search/label/All+All +全部+全部*
就像是:
Animated Only? <input type="radio" name="Animated" id="Animated" value="Animated" /> Y <input type="radio" name="Animated" id="Animated" value="All" /> N
或者
b >>>>有一个复选框,选中时值为“动画”,未选中时没有值。目的与上述相同,生成以下 URL:选中:(URL)/search/label/All+All+All+Animated * 或未选中(URL)/search/label/All+All+All *
- "All+All+All" - 前三个 'All' 当前是数据列表的唯一值。我已经删除了完整的值/标签列表,以使这篇文章尽可能简短。
生成的表单应允许访问者通过表单中的多个预定义标签(值)以及仅在“所有”项目或“动画”项目中搜索的选项来搜索我的网站。
我希望这是有道理的。任何帮助将不胜感激 - 我确信这将是本网站上 JavaScript 专家的一个简单修复。我郑重发誓我已经花了几个晚上试图从网站上的许多解决方案中弄清楚这一点,但我对 JavaScript 的了解还不够(下班后太累了),无法提取相关的部分并拼凑出一个新的脚本。