javascript - 根据组合框选择更改 HTML 布局

Question

我正在设计一个 HTML 网页，它允许用户查询 xml 文件。基本上，他们选择要查询的列、搜索类型，然后输入其值。但是，如果他们在组合框中进行选择，那么在第一个文本输入框之后，我希望出现一个 & 标签，并出现另一个输入框。

当前代码如下:

<form name="myform" action="podcatalog.xml" method="POST">
<select id="ddl" onchange="configureDropDownLists(this,'ddl2')">
<option value="author">Author</option>
<option value="title">Title</option>
<option value="pages">Pages</option>
<option value="year">Year</option>
</select>

<select id="ddl2" onchange="configureTextFields(this, 'querystring')">
</select>

<input type="text" name="querystring"/>

<input type="submit" value="Search"/>

</form>

<script type="text/javascript">
function configureDropDownLists(ddl1,ddl2) {
    var string = new Array('Contains', 'Equals');
    var number = new Array('=', '<', '>', 'Between', '!=' );

    switch (ddl1.value) {
        case 'author':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < string.length; i++) {
                createOption(document.getElementById(ddl2), string[i], string[i]);
            }
            break;

        case 'title':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < string.length; i++) {
                createOption(document.getElementById(ddl2), string[i], string[i]);
            }
            break;

        case 'pages':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < number.length; i++) {
                createOption(document.getElementById(ddl2), number[i], number[i]);
            }
            break;

        case 'year':
            document.getElementById(ddl2).options.length = 0;
            for (i = 0; i < number.length; i++) {
                createOption(document.getElementById(ddl2), number[i], number[i]);
            }
            break;

            default:
                document.getElementById(ddl2).options.length = 0;
            break;
    }

}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

function configureTextFields(ddl2) {
    switch (ddl2.value) {
        case 'Between':

        // Need code here?

Answer 1

您需要在第一个输入框后面添加一个带有 css 类的 div 来隐藏该 div。然后，当您的 configureTextFields(this, 'querystring') 触发时，如果所选项目位于两者之间，那么您将使用 javascript 删除 css 类。

我个人建议为此使用 jquery。这是来自另一个论坛的帖子，该帖子正在做类似的事情。

http://www.webdeveloper.com/forum/showthread.php?t=194923

如果你不熟悉 jquery，你会想看看它，它可以让你的生活变得更轻松。 http://jquery.com/