Question

我知道在这个网站上已多次询问这些问题的变体，但我会再试一次。我觉得我已经尝试过各种代码组合，试图让它工作，但没有运气。我想要做的就是在按钮/下拉按钮上获得'高级：'文本，以便在单击时更改为所选的下拉项目选项之一（Item1，Item2等）。

所有功能显然都不会在我的代码中结束，但我只是想举例说明我已经尝试过的。

$(function () {
             $("#dropdown").click(function () {
                 $("#AdvancedSearch").text($(this).find(":selected").text());
                 $("#dropdown option:selected").text();
                 var text = $("#AdvancedSearch").text($(this).text());
                 alert(text);
             });
         });

         $(".dropdown-menu li a").click(function () {
             var selText = $(this).text();
             $(this).parents('.input-group-btn').find('.dropdown-toggle').html(selText);
         });

         $(function () {

             $("#dropdown").on('click', 'li a', function () {
                 $("#AdvancedSubmit").text($(this).text());
                 $("#AdvancedSubmit").val($(this).text());
             });

         });

         $(function () {

             $("#dropdown").click(function () {

                 $("#AdvancedSubmit").text($(this).text());
                 $("#AdvancedSubmit").val($(this).text());

             });

         });


<div class="container">
        <div class="row buffer">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
                    <div class="input-group" role="group" >
                        <div class="input-group-btn" role="group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
                    <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
                        <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
                        <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
                        <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
                    </div>
                    </div>
                    </div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
                    <div class="input-group" role="group">
                        <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
                    </div>
            </div>
        </div> 
        </div>

Answer 1

您想要的是在用户单击列表链接时执行功能。此函数必须将文本放在其自己的标记内，并且我们必须将该文本放在每个具有＆＃34; selection＆＃34;类。

＆＃13;

$(function () {
         $(".dropdown-menu li a").click(function () {
             var selText = $(this).text();
             $(".selection").html(selText);
         });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="row buffer">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
                    <div class="input-group" role="group" >
                        <div class="input-group-btn" role="group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown" OnClick="AdvancedSubmit();" style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
                    <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
                        <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
                        <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
                        <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
                    </div>
                    </div>
                    </div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
                    <div class="input-group" role="group">
                        <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
                    </div>
            </div>
        </div> 
        </div>

＆＃13;

坚持不懈地尝试！

Answer 2

试试这个：

＆＃13;

$(function () {
    $("#dropdown a").click(function () {
        $("#AdvancedSearch .selection").text('Advanced:'+$(this).text());
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
        <div class="row buffer">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">
                    <div class="input-group" role="group" >
                        <div class="input-group-btn" role="group">
                        <button type="button" class="btn btn-secondary dropdown-toggle" id="AdvancedSearch" data-toggle="dropdown"  style="background-color:#718CA1;color:#FFF;" > <span class="selection">Advanced:</span></button>
                    <div class="dropdown-menu" id="dropdown" style="background-color:#718CA1;color:#FFF;">
                        <li><a class="dropdown-item" href="#" data-value="item1">ITEM1</a></li>
                        <li><a class="dropdown-item" href="#" data-value="item2">ITEM2</a></li>
                        <li><a class="dropdown-item" href="#" data-value="item3">ITEM3</a></li>
                    </div>
                    </div>
                    </div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
                    <div class="input-group" role="group">
                        <input type="text" id="InquiryInput2" onblur="javascript:removeSpaces()" style="display:none" runat="server" class="form-control" Width="280px" placeholder="Asset Dept, Building, Asset MGR BEMSID #" />
                    </div>
            </div>
        </div> 
        </div>

＆＃13;

将按钮/下拉文本更改为选定的下拉项

2 个答案: