将无序列表所选项目传递给ASP.. NET Web Forms使用jQuery

本文关键字:NET ASP Web Forms jQuery 使用 列表 无序 选项 项目 | 更新日期: 2023-09-27 18:11:31

我之前问了一个问题,但没有正确表达。

我是第一次使用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);
});

将无序列表所选项目传递给ASP.. NET Web Forms使用jQuery

如果你必须有下拉列表,你想要保持这种类型的功能,那么我简单地使用隐藏的输入字段,像这样:

 <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);
        });
    });
});
这里的

小提琴