1

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

http://jsfiddle.net/2yWzc/1/

HTML：

<form class="list" action="table.php" method="get">
    <table>
        <tbody>
            <tr class="name">
                <td>First Name:</td>
                <td><input type="text" class="searchBox" name="q1" /></td>
            </tr>
            <tr class="name">
                <td>Last Name:</td>
                <td><input type="text" class="searchBox" name="q2" /></td>
            </tr>

            <tr class="owner">
                <td>Owner:</td>
                <td><input type="text" class="searchBox" name="q1" /></td>
            </tr>

            <tr class="dlp">
                <td>Text 1:</td>
                <td><input type="text" class="searchBox" name="q1" /></td>
            </tr>
            <tr class="dlp">
                <td>Text 2:</td>
                <td><input type="text" class="searchBox" name="q2" /></td>
            </tr>
            <tr class="dlp">
                <td>Text 3:</td>
                <td><input type="text" class="searchBox" name="q3" /></td>
            </tr>

            <tr>
                <td></td>
                <td><input type="submit" value="SEARCH" /></td>
            </tr>
        </tbody>
    </table>

    <br>

    <select id="options">
        <option value="name">Option 1</option>
        <option value="owner">Option 2</option>
        <option value="dlp">Option 3</option>
    </select>
</form>

JS：

$('#options').change(function() {
    if ($(this).val() == 'name') {
        $('.name').show();
        $('.owner').hide();
        $('.dlp').hide();
    } else if ($(this).val() == 'owner') {
        $('.name').hide();
        $('.owner').show();
        $('.dlp').hide();
    } else if ($(this).val() == 'dlp') {
        $('.name').hide();
        $('.owner').hide();
        $('.dlp').show();
    }
});

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

        if (url) {
            window.location = url;
        }

        return false;
    });
});

这显示了正确数量的搜索框，但它不会将搜索框中的文本保存在变量中。这似乎也不是一个好方法（如果你知道正确的方法，请指出我正确的方向。这是我唯一能做的事情）。在此之前，我每个类别有 1 个搜索框，所以我的 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 传递的搜索框的变量（同样，这可能不是正确的方法？）。

谁能帮我吗？谢谢

4

2 回答 2

1

你可以试试下面的。

事件处理程序绑定到表单的submit事件。在其中，我们获得了表单中type="text"存在的所有输入元素的列表，并仅选择使用该filter方法可见的字段。然后我们遍历元素列表并形成dataString。此 dataString 具有格式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;
    });
});

更新的工作演示

于 2013-08-28T16:36:28.830 回答
0

不是最好的方法，但这是对你的 jsfiddle 的更新，它将做你想做的事

$(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;
    });
});

http://jsfiddle.net/2yWzc/4/

于 2013-08-28T16:35:30.643 回答