链接组合框（最好是 JQuery）答案

【问题标题】：Linking combo box (JQuery preferrably)链接组合框（最好是 JQuery）
【发布时间】：2010-09-08 02:51:12
【问题描述】：

我想知道是否有人有使用转换 html 的 JQuery 插件的经验

<select> 
  <option> Blah </option> 
</select>

将组合框放入某个东西（可能是一个 div）中，其中选择一个项目的作用与单击一个链接的作用相同。

我猜您可能会使用 javascript 来处理选择事件（我的 javascript 知识目前有点年久失修）并“切换”组合框的值，但这似乎更像是一种 hack。

感谢您的意见、经验和建议。

【问题讨论】：

标签： javascript jquery html drop-down-menu

【解决方案1】：

简单的解决方案是使用

$("#mySelect").change(function() {
  document.location = this.value;
});

这会在选择框上创建一个 onchange 事件，将您重定向到存储在所选选项的 value 字段中的 url。

【讨论】：

【解决方案2】：

当你点击 Div 时，我不确定你想链接到哪里，但考虑到这样的事情可能会起作用：

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</options>
</select>
<div id="myDiv"/>

下面的 JQuery 创建了一个<div> 元素列表，a 会根据选项的值转到一个 URL：

$("#mySelect option").each(function() {
    $("<div>" + $(this).text() + "</div>").appendTo($("#myDiv")).bind("click", $(this).val(), function(event) {
        location.href = "goto.php?id=" + event.data;
    });
});
$("#mySelect").remove();

这是你想要的吗？

【讨论】：

【解决方案3】：

如果您要允许将许多选择框用作重定向，而不必单独定义它们，请尝试类似的方法：

$("[id*='COMMON_NAME']").change(function() {
    document.location = this.value;
});

并相应地命名您的选择框：

<select id="COMMON_NAME_001">...</select>
<select id="COMMON_NAME_002">...</select>

这会为所有包含“COMMON_NAME”的 ID 创建一个 onchange 事件，以重定向 <option> 值。

【讨论】：

【解决方案4】：

'select' 中的这段 javascript：

onchange="if(this.options[this.selectedIndex].value!=''){this.form.submit()}"

这并不理想（因为我正在使用的 ASP.NET MVC 中的表单提交似乎没有使用 URL 的路由引擎）但它可以完成它的工作。

【讨论】：