0

我想更改此代码...

<form action="search.php" method="get" name="form1" id="form1">
<select name="name">
  <option value="category">CATEGORY</option>
  <option value="product">PRODUCT</option>
</select>
<input name="value" type="text" id="catprod" size="20" />

最后我想收到一个类型的链接......

http://www.mysite.com/search.php?product=car

或者

http://www.mysite.com/search.php?category=auto

取决于下拉列表中的哪个项目将选择客户。“汽车”和“汽车”是客户的搜索请求，他们将输入。

4

3 回答 3

2

好吧，有两种方法可以做到这一点。

第一个是在 de select 更改时将文本字段的输入名称更改为正确的名称（类别或产品）。所以你做一个

onChange="document.getElementById('catprod').name = this.value;"

请注意，在加载时您已经为输入提供了正确的名称。在正常情况下，这将是“类别”（因为它被选为第一个）。

另一种选择是使 2 个输入字段隐藏 1 个。然后显示用户选择的字段。（也有一个 onchange，但随后使用隐藏和显示）。

无论如何，这两者都不是解决问题的最佳方法。最好的问题就是在您的 PHP 脚本中解决它。

于 2012-09-04T15:48:27.907 回答
1

我会使用以下内容：

<html>
    <head>
        <script>
            function redirect() {
                window.location.href = 'http://www.mysite.com/search.php?'+document.form1.key.value+'='+document.form1.val.value;
            }
        </script>
    </head>
    <form name="form1" onsubmit="redirect(); return false;">
        <select name="key">
           <option value="category">CATEGORY</option>
           <option value="product">PRODUCT</option>
        </select>
        <input name="val" type="text" id="catprod" />
    </form>
</html>

您的 javascript 和 html 主要以这种方式分离。

于 2012-09-04T15:51:17.427 回答
0 
<form action="search.php" method="get" name="form1" id="form1">
<select style="border:1px solid rgb(102,153,204);background-color:FFFFCC;height:20px;width:120px;" onfocus="this.style.background='white'" onblur="this.style.background='FFFFCC'" name="name" id="myselect">
                              <option value="category">CATEGORY</option>
                              <option value="product">PRODUCT</option>
                            </select>
<input name="value" type="text" id="catprod" style="border:1px solid rgb(102,153,204);background-color:FFFFCC;height:15px;width:200px;" onfocus="this.style.background='white'" onblur="this.style.background='FFFFCC'" size="20" />

<script>
  var submitform = function() {
   form1.submit();  
  }
  document.getElementById('myselect').onchange = submitform;
</script>

我强烈建议您不要使用内联 css，并为您的 ID（和类）提供更有意义的名称。另外，避免使用内联 JS。

脚本标签中的代码所做的是，当您更改选择元素上的值时提交表单。由于您的表单使用“get”方法，因此您在提交表单时将拥有这些类型的 URL。

于 2012-09-04T16:21:24.953 回答