Question

我正在设计一个HTML网页，允许用户查询xml文件。基本上，他们选择要查询的列，搜索类型，然后键入其值。但是，如果他们在组合框中进行选择，那么在第一个文本输入框之后，我想要一个＆amp;标签和另一个要显示的输入框。

目前的代码如下：

<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/

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

1 个答案: