如何僅提交從下拉列表中選擇的值？

Question

我有以下代碼，並在表單上調用serialize（）方法：

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<form>
    <select id="CouponType" name="CouponType">
        <option value="MONEYOFF">MONEYOFF</option>
        <option value="BONUSPOINTS">BONUSPOINTS</option>
    </select>

    <input type="button" id="btnSubmit" value="SUBMIT ME" />

    <script type="text/javascript">

        $("#btnSubmit").click(function (e) {
            e.preventDefault();
            alert($('form').serialize());
        });

    </script>
</form>

應該發生的情況是，僅當下拉列表具有值時才必須求和該值，但它始終會提交列表中的第一個選項，因此警報的結果始終是IE 7.0，IE 8.0，IE 9.0和鉻：

CouponType=MONEYOFF

如何僅提交從下拉列表中選擇的值？

Answer 1

這是你想要的嗎？

<form>
    <select id="CouponType" name="CouponType">
        <option value="MONEYOFF">MONEYOFF</option>
        <option value="BONUSPOINTS">BONUSPOINTS</option>
    </select>

    <input type="button" id="btnSubmit" value="SUBMIT ME" />

    <script type="text/javascript">

        $("#btnSubmit").click(function (e) {
            e.preventDefault();
            alert($('#CouponType').val());
        });

    </script>
</form>

http://jsfiddle.net/24Hz9/

Answer 2

您將必須創建一個默認情況下將被選擇的空白選項，除非用戶選擇一個，否則將不提交任何值。

<form>
    <select id="CouponType" name="CouponType">
        <option value="">Select a type</option>
        <option value="MONEYOFF">MONEYOFF</option>
        <option value="BONUSPOINTS">BONUSPOINTS</option>
    </select>
    <input type="button" id="btnSubmit" value="SUBMIT ME" />
</form>

$("#btnSubmit").click(function (e) {
    e.preventDefault();
    if ($('#CouponType').val()) {
        alert($('form').serialize());
    }
});

http://jsfiddle.net/ginovva320/C8N7X/

Answer 3

如果未選擇任何一項，則IE 9.0+默認情況下使SelectedIndex = -1，而IE 7、8和Chrome則使SelectedIndex = 0，因此發布第一項。