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

我正在设计一个

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?

作者
标题
页
年
功能配置下拉列表（ddl1、ddl2）{
变量字符串=新数组（'Contains'，'Equals'）；
变量编号=新数组（'='，''Between'，'！='）；
开关（ddl1.value）{
案例“作者”：
document.getElementById（ddl2）.options.length=0；
对于（i=0；i

---

您需要在第一个带有css类的输入框后添加一个div来隐藏该div。然后，当您的

配置文本字段（此“querystring”）触发时，如果所选项目介于两者之间，则您将使用javascript删除css类

就我个人而言，我建议考虑使用jquery来实现这一点


如果您不熟悉jquery，您会想查看它，它可以让您的生活更轻松。
您需要在第一个输入框后添加一个div，上面有一个css类来隐藏div。然后当您的
配置TextFields（这是“querystring”）时
如果选择的项目介于两者之间，则激发，然后您将使用javascript删除css类

就我个人而言，我建议考虑使用jquery来实现这一点


如果您不熟悉jquery，您会想查看它，它可以让您的生活变得更加轻松