使用jQuery將無序列表選定的項目傳遞給ASP.NET Web窗體

Question

我早些時候問過一個問題，但措辭不正確。

我幾乎是第一次使用jQuery和Bootstrap，並且需要一些幫助。

我有一個具有以下代碼的.aspx網頁：

<form method="POST" action="Search.aspx">
    <div>
        <input type="text" class="form-control" name="srchterm" id="srchterm" style="width: 300px" />
        <button id="Submit" class="btn btn-primary" type="submit">
            GO!</button>
    </div>
    <br />
    <div>
        <div class="btn-group">
            <a id="reportType" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#"
                 name="rptType">Select report type<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li id="1"><a href="#">All</a></li>
                <li id="2"><a href="#">Some</a></li>
                <li id="3"><a href="#">None</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <a id="reportStatus" class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#">
                Report Status<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li id="1"><a href="#">Active</a></li>
                <li id="2"><a href="#">Archived</a></li>
                <li id="3"><a href="#">All</a></li>
            </ul>
        </div>

        </div>
    </div>

    </form>

我想知道的是如何使用JQuery或AJAX將選定的無序列表項的值傳遞給后面的代碼。 我都不知道（或者說實話）這兩種方法。

當我按下“提交”按鈕時，它將獲取文本框值，並將其傳遞回Request.Form("srchTerm")但我似乎無法傳遞任何其他值。

我看到這個鏈接在這里小提琴 ，但不能似乎得到它為我工作。

我想知道是否是因為我如何聲明我的列表框，但確實需要幫助才能使其工作。

如果我缺少標簽，請告訴我。 但是我非常感謝JavaScript的幫助，以幫助它連接起來傳遞數據，以便我可以從數據庫中調用信息。

====================================

編輯1

我嘗試了各種方法，但我沒有保留任何方法，但這是我現在無法獲得傳遞值的任何方法。

$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    $(this).parents('.btn-group').find('.dropdown-toggle').html(selText + '     <span class="caret"></span>');
});

$('.reportType li').click(function () {
    value1 = $(this).attr('value');
});

$('.reportStatus li').click(function () {
    value2 = $(this).attr('value');
});

$('#Submit').click(function () {
    alert('value1 = ' + value1 + ' | value2 = ' + value2);
});

Answer 1

如果您必須具有下拉列表，並且想要維護這種類型的功能，那么我將只使用隱藏的輸入字段，如下所示：

 <div class="btn-group">
   <input type="hidden" id="reportStatus" name="reportStatus" />
   <a class="btn btn-default dropdown-toggle btn-select" 
      data-toggle="dropdown" href="#">
        Report Status
        <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
     <li data-val="1"><a href="#">Active</a></li>
     <li data-val="2"><a href="#">Archived</a></li>
     <li data-val="3"><a href="#">All</a></li>
   </ul>
 </div>

JS將類似於：

//$(function () {
//   $("#reportStatus").parents("div").find("li").click(function () {
//        value = $(this).attr("data-val");
//        $("#reportStatus").val(value);
//    })
//});

//or something more general:

$(function () {

    $(".btn-group").each(function (index, item) {
        myInput = $(item).children("input");

        $(item).find("li").click(function () {
            value = $(this).attr("data-val");
            myInput.val(value);

        });
    });
});

在這里擺弄