0

我需要在不使用数据库的情况下使用 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 与菜单 B 一样具有从 1 到 13 的数字。它们没有被链接，但它们需要一个条件方面。例如，假设在菜单 A 中选择“5”，在菜单 B 中选择“7”，在提交时，我需要提取该特定组合独有的文件，我们将其称为“57.html”作为示例。或者，如果在菜单 A 中选择“4”，在菜单 B 中选择“8”，它会在提交时拉取一个名为“48.html”的文件。

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

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

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

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

谢谢！

4

1 回答 1

0

您要问的内容与“链接”或“条件”无关。您所做的就是在提交时查看两个选择中的每一个的值，将它们组合起来，最后粘贴“.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();
    });
});
于 2013-10-05T06:24:27.483 回答