Javascript 使用下拉菜单添加/删除搜索框

我有一个下拉列表，其中有3个类别。我希望这样，当用户选择一个类别时，该类别的搜索框的正确数量将出现。然后，我希望输入到搜索框中的文本作为URL中的变量保存。这是我得到的

HTML:

这显示了搜索框的正确数量，但不会将文本保存在变量的搜索框中。这似乎也不是一个好方法（如果你知道正确的方法，给我指出正确的方向。这是我唯一能做的有效的事情）。在此之前，我每个类别有一个搜索框，所以我的JS代码是这样的

(function($) {
    $(function(){
        $('form').bind('change', function () {
            var url = $(this).val(); // get selected value

            if (url) { // require a URL
                window.location = url; // redirect
            }

            return false;
        });
    });
})(jQuery)​;

但是，我不知道如何让它在多个搜索框中工作。我只想要显示为通过URL传递的搜索框的变量（同样，这可能不是正确的方法？）

---

有人能帮我吗？谢谢

这不是最好的方法，但是这里有一个对您的JSFIDLE的更新，它可以满足您的需要

$(function(){
    $('input[type=submit]').bind('click', function () {
        count = 0;
        url = '';
        $("input[type=text]").each(function(){
            if($(this).is(":visible")){
                count++;
                if(count != 1){
                    url += "&";
                }
                url += "var"+count+"="+$(this).val();
            }
        });
        if(count != 0){
            url += "&";
        }
        url += "count="+count;
        url += "&option="+$("#options").val();
        alert(url);
        return false;
    });
});

---

这不是最好的方法，但这里有一个对JSFIDLE的更新，它可以满足您的需要

$(function(){
    $('input[type=submit]').bind('click', function () {
        count = 0;
        url = '';
        $("input[type=text]").each(function(){
            if($(this).is(":visible")){
                count++;
                if(count != 1){
                    url += "&";
                }
                url += "var"+count+"="+$(this).val();
            }
        });
        if(count != 0){
            url += "&";
        }
        url += "count="+count;
        url += "&option="+$("#options").val();
        alert(url);
        return false;
    });
});

您可以尝试下面的方法

事件处理程序绑定到表单的

submit

事件。在其中，我们获得了表单中存在的具有

type=“text”

的所有输入元素的列表，并使用

filter

方法仅拾取可见的字段。然后遍历元素列表并形成数据字符串。此数据字符串的格式为

q=a&q1=b

，并将附加到URL

encodeURIComponent

用于对数据字符串进行编码

$(function(){
    var dataString = "";
    var url="sample.htm";
    var count=0;
    $('form').bind('submit', function () {
        $('form input[type="text"]').filter(':visible').each(function(){
            if(count === 0)
                dataString += this.name + "=" + $(this).val();
            else
                dataString += '&' + this.name + "=" + $(this).val();
            count++;
        });
        //console.log(dataString);
        dataString += "&t="+$("#options").val(); //appending the value of the select box
        if (url) {
            window.location = url + "?" + encodeURIComponent(dataString); //added for the URL encode
        }

        return false;
    });
});

您可以尝试下面的方法

事件处理程序绑定到表单的

submit

事件。在其中，我们获得了表单中存在的具有

type=“text”

的所有输入元素的列表，并使用

filter

方法仅拾取可见的字段。然后遍历元素列表并形成数据字符串。此数据字符串的格式为

q=a&q1=b

，并将附加到URL

encodeURIComponent

用于对数据字符串进行编码

$(function(){
    var dataString = "";
    var url="sample.htm";
    var count=0;
    $('form').bind('submit', function () {
        $('form input[type="text"]').filter(':visible').each(function(){
            if(count === 0)
                dataString += this.name + "=" + $(this).val();
            else
                dataString += '&' + this.name + "=" + $(this).val();
            count++;
        });
        //console.log(dataString);
        dataString += "&t="+$("#options").val(); //appending the value of the select box
        if (url) {
            window.location = url + "?" + encodeURIComponent(dataString); //added for the URL encode
        }

        return false;
    });
});

---

---

您希望在单击“搜索”按钮时发生重定向吗？是。或者当用户点击Enter时。我正在尝试通过URL将每个搜索框（以及下拉类别）中显示的文本传递到另一个页面。是否要将输入字段中输入的值和所选选项文本作为URL中的查询参数传递？@Harry-抱歉！表格是我网站上的一个表格。我会更新代码。法汉-是的。作为单独的变量（例如？q1=something&q2=something&t=name），禁用隐藏元素将阻止它们与表单一起提交，请参阅。这就是您要问的吗？您希望在单击“搜索”按钮时发生重定向吗？是的。或者当用户点击Enter时。我正在尝试通过URL将每个搜索框（以及下拉类别）中显示的文本传递到另一个页面。是否要将输入字段中输入的值和所选选项文本作为URL中的查询参数传递？@Harry-抱歉！表格是我网站上的一个表格。我会更新代码。法汉-是的。作为单独的变量（例如？q1=something&q2=something&t=name），禁用隐藏元素将阻止它们与表单一起提交，请参阅。这就是你要问的吗？像这样构建URL通常比它的价值更麻烦。想到的第一个问题是url字符，比如“Bernie&Phyl’s”的所有者字段值。&将导致问题，因为您没有对example@maj0rtom：有一个问题是在第一个参数之前就添加了“&”，我现在已经解决了这个问题。因为我们在编码，我认为必须先解码。但是我没有很多用PHP做这件事的经验。让我看看能不能找到样品。谢谢！你的帮助真的很感激这个更新可能会帮助你交配。然后可以使用

rawurldecode（$\u GET['q']）

来获取值。@maj0rtom:我刚签入IE8，它工作正常。控制台是否报告任何错误？像这样构造URL通常比它的价值更麻烦。想到的第一个问题是url字符，比如“Bernie&Phyl’s”的所有者字段值。&将导致问题，因为您没有对example@maj0rtom：有一个问题是在第一个参数之前就添加了“&”，我现在已经解决了这个问题。因为我们在编码，我认为必须先解码。但是我没有很多用PHP做这件事的经验。让我看看能不能找到样品。谢谢！你的帮助真的很感激这个更新可能会帮助你交配。然后可以使用

rawurldecode（$\u GET['q']）

来获取值。@maj0rtom:我刚签入IE8，它工作正常。控制台是否报告任何错误？