Question

我有一个这样的表格：

        <form name="search" class="form-search" method="get" action="http://www.bernhardt.com/search.php?">
            <div>
              <input name="search" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
              <select>
                <option>Option1</option>
                <option>Option2</option>
                <option>Option3</option>
              </select>
              <button type="submit" class="btn btn-primary">Search</button>
            </div>
        </form>

我希望这样当选择Option1时，表单的输入如下：

<form name="search" class="form-search" method="get" action="http://www.websitehere.com/search.php?">
<div>
<input name="search" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<button type="submit" class="btn btn-primary">Search</button>
</div>

当Option2时，如下：

<form name="search" class="form-search" method="get" action="http://www.websitehere.com/search.php?">
<div>
<input name="searchbynum" type="text" class="search-query input-large" onkeypress="return submitenter(this,event)">
<input type="hidden" name="searchbydesc" value="" />
<input type="hidden" name="Submit" value="Go" />
<button type="submit" class="btn btn-primary">Search</button>
</div>

所以没有，等等其他选择。我知道这里需要相当多的Javascript，但我不知道如何（我知道基本的HTML和CSS，而不是Javascript）。我很感激有关这个主题的任何帮助。

Answer 1

看一下document.createElement（）

你应该可以这样做：

<script>
function addInputs() {
    var input = document.createElement("input");
    document.getElementById("frm").appendChild(input);
}
</script>

<form id="frm">
<select onchange="addInputs()" id="sel">
<option>Option 1</option>
</select>
</form>

基于下拉选择的动态搜索参数

1 个答案: