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

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>