0

我在尝试根据 Select 元素的值使用 jQuery 将参数添加到 URL 时遇到问题。到目前为止，这是我的代码：

<script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        $(this).closest("form").submit();
});
var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
});
</script>

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>

        <input type="submit" class="hidden"/>
    </fieldset>
</form>

出于某种原因，无论我选择哪个选项，URL 都会变成 process.php?state=Select。我需要它做的是变成 process.php?state=TX 或用户选择的任何选项。

任何帮助是极大的赞赏！

4

5 回答 5

1

您需要更新隐藏输入的值：

$(document).ready(function () {
    $("#sel-1").change(function() {
        $('[name=state]').val($('#sel-1').val()); 
        $(this).closest("form").submit();
});

这里的例子：http: //jsfiddle.net/wKvLm/1/show/

另外...使用您当前的代码，无需通过 JS 创建该输入。您可以像这样在 HTML 中定义它：

<script type="text/javascript">
    $(document).ready(function () {
        $("#sel-1").change(function() {
            $('[name=state]').val($('#sel-1').val());        
            $(this).closest("form").submit();
        });
    });
</script>

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>
        <input type="hidden" name="state" value="Select"/>
        <input type="submit" class="hidden"/>
    </fieldset>
</form>​

这里的工作示例：http: //jsfiddle.net/wKvLm/2/show/

于 2012-11-29T01:26:56.733 回答
0

发生这种情况是因为它在页面加载时获得了值。

尝试：

<script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        if ($("#sel-1").val() != "Select") {
            var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
            $('.start-form').append($(input));
            $(this).closest("form").submit();
        }
    });
});
</script>
于 2012-11-29T01:25:56.703 回答
0

尝试这个。

    <script type="text/javascript">
$(document).ready(function () {
    $("#sel-1").change(function() {
        var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
$('.start-form').append($(input));
        $(this).closest("form").submit();
});

});
</script>
于 2012-11-29T01:28:28.810 回答
0

一个简单的方法是使用 jQuery 的 serialize 方法：

<form action="process.php" class="start-form">
    <fieldset>
        <div class="row">
            <label for="sel-1">Select <strong>State</strong></label>
            <select id="sel-1">
                <option value="Select">Select</option>
                <option value="AK">AK</option>
                <option value="CA">CA</option>
                <option value="TX">TX</option>
            </select>
        </div>
        <input type="submit" onlick="alert($(this).closest('form').serialize()); return false;" class="hidden"/>
    </fieldset>
</form>
于 2012-11-29T01:33:00.993 回答
0 
<script type="text/javascript">
$(document).ready(function () {

    $("#sel-1").change(function() {

      var input = $("<input>").attr("type", "hidden").attr("name", "state").val($("#sel-1").val());
        $('.start-form').append($(input));
        $(this).closest("form").submit();
});


});
</script>

您应该在 on change 事件中设置变量数据。

我们在这里所做的是添加一个新的输入隐藏字段，并在下拉列表更改时删除值。然后附加输入字段并提交表单。

于 2012-11-29T01:28:55.980 回答