Question

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

您可以在此处看到无效的视觉参考：

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”的文件。

我发现的两个选择菜单的所有在线演示似乎都有链接菜单，其中第二个菜单填充在选择第一个菜单后，不< / strong>我想要的。例如：

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

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

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

谢谢！

Answer 1

你所要求的与“链接”或“条件”无关。你所做的只是当你提交时，你看两个选择中的每一个的价值，合并它们，最后粘贴'.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();
    });
});

有条件的下拉列表

1 个答案: