将组合框与JQuery链接（最好使用JQuery）

Question

我想知道是否有人有使用JQuery插件的经验，该插件可以将HTML转换为...

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

将下拉框转换为某个元素（可能是div），其中选择一个项目的操作类似于单击链接。我猜您可以使用JavaScript来处理选择事件（我的JavaScript知识目前有点生疏），并根据组合框的值进行“切换”，但这似乎更像是一种hack。期待您的建议，经验和推荐。

- Graphain

Answer 1

简单的解决方案是使用：

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

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

- Erlend Halvorsen

Answer 2

我不确定您点击Div时想要链接到哪里，但是给出类似以下的代码可能会起作用：

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

以下的 JQuery 代码创建了一个 <div> 元素列表，当选项改变时会跳转到对应 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();

这个是否符合你的要求？

- samjudson

Answer 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>值。

- Drew J

Answer 4

在“select”中的这段JavaScript：

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

这并不是理想的解决方案（因为我使用的ASP.NET MVC中的表单提交似乎不使用路由引擎来处理URL），但它能够完成工作。

- Graphain