条件下拉列表

Conditional Dropdowns

本文关键字：下拉列表 条件      更新时间：2023-09-26

我需要在不使用数据库的情况下使用 JavaScript 或 JS 库构建一组有条件的选择菜单，因为它仅适用于简单的原型。但是，我是JS的初学者，无法找到解决方案。

您可以在此处看到不起作用的视觉参考：

http://jsfiddle.net/js_noob/n3Fwg/

Stack Overflow要求我从JSFiddle发布代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Two Part Select</title>
<style>
    p, select {
    float: left;
}
br {
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
}
form {
    margin-top: 0;
    padding-top: 0;
}
</style>
</head>
<body>
<p style="margin-left: 20px;">A</p>
<p style="margin-left: 50px;">B</p>
<br>
<form>
<select style="float: left;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>

<select style="float: left; margin-left: 20px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
<button style="float: left; margin-left: 20px;">Submit</button>
</form>
<br>
</body>
</html>

以下是所需功能的说明：

选择菜单 A 有从 1 到 13 的数字，菜单 B 也是如此。它们没有被锁链，但有一个条件的方面要求它们。例如，假设在菜单 A 中选择"5"，在菜单 B 中选择"7"，在提交时我需要拉取该特定组合独有的文件，我们称之为"57.html"作为示例。或者，如果在菜单 A 中选择了"4"，而在菜单 B 中选择了"8"，它将在提交时拉取一个名为"48.html"的文件。

我

发现的两个选择菜单协同工作的所有在线演示似乎都有链接菜单，在第一个菜单中选择一些东西后填充第二个菜单，这不是我想要的。例如：

http://javascript.about.com/library/bldydrop1.htm

就我而言，两者必须一起工作，但菜单 B 的数字必须始终可见，并将引用菜单 A 中的数字选择来调用正确的文件。

我的描述有意义吗？我不确定这会叫什么，但在过去的几天里，我一直在寻找解决方案，但没有找到我想要的确切内容。如果有人有任何建议或意见为我指出正确的方向，他们将不胜感激。

谢谢！

你问的与"链接"或"条件"无关。 你所做的只是，当你提交时，你查看两个选择中的每一个的值，将它们组合在一起，在末尾贴上".html"，然后继续。

既然你说你是JS的新手，这里有一个使用jQuery的记录小提琴(这将使你的生活更简单(。 http://jsfiddle.net/manishie/vPJ9B/

修改后的 HTML(我为两个元素添加了 ID(：

<select id="select1" style="float: left;">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
</select>
<select id="select2" style="float: left; margin-left: 20px;">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
</select>

Javascript：

// tell jquery to wait until the document has loaded
$(function () {
    // setup an event handler to respond to the submit event
    $('button').click(function (event) {
        //combine the two values
        alert($('#select1').val() + $('#select2').val() + '.html');
        // for the purposes of this demo, disable the actual submit
        event.preventDefault();
    });
});
相关文章：