Question

我在尝试使用基于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或用户选择的任何选项。

非常感谢任何帮助！

Answer 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/

Answer 2

这是因为它获得了页面加载的值。

尝试：

<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>

Answer 3

试试这个。

    <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>

Answer 4

<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事件中设置变量数据。

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

Answer 5

一种简单的方法是使用jQuery的序列化方法：

<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>

使用jQuery将选择数据附加到URL

5 个答案: