Question

我似乎无法找到如何在任何地方执行此操作，除了来自下拉列表本身的onClick事件，因为我需要同时获取它们，所以它不会起作用。

我试图在用户按下SUBMIT按钮时从下拉列表中检索所选文本值。

这是HTML和Javascript代码：

HTML

<div class="col-md-5">
        <span class="select" id="datacenter_select">
                    <button type="button" id="datacenter_select_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">Data Center</span> <span class="caret"></span></button>
                    <ul class="dropdown-menu option" role="menu">
                        <li id="1"><a href="#">option1</a></li>
                        <li id="2"><a href="#">option2</a></li>
                    </ul>
        </span>
        <span class="select" id="state_select">
                    <button type="button" id="state_select_btn" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="selected">State</span> <span class="caret"></span></button>
                    <ul id="state_select_ul" class="dropdown-menu option" role="menu">
                    <li id="1"><a href="#">state1</a></li>
                    <li id="2"><a href="#">state2</a></li>
                    <li id="3"><a href="#">state3</a></li>
                    </ul>
        </span>
        <button type="button" id="state_submit_btn" class="btn btn-default dropdown-toggle submit_buttons">Submit</button>
</div> <!--columns -->

JAVASCRIPT

$(document).ready() {
function gen_state(STATE_SELECTION,DATACENTER_SELECTION) {
    $.ajax(
        {
        url: "get_state.php?state=STATE_SELECTION&datacenter=DATACENTER_SELECTION",
        async: false,
        success: function(data)
            {
            document.getElementById("state_results").innerHTML = data;
            }
        }
        )
    return;
    }

$('#datacenter_select').on('click','.option li',function(){
    var i = $(this).parents('.select').attr('id');
    var DATACENTER_SELECTION = $(this).children().text();
    var o = $(this).attr('id');
    $('#'+i+' .selected').attr('id',o);
    $('#'+i+' .selected').text(DATACENTER_SELECTION);
    });

$('#state_select').on('click','.option li',function(){
    var i = $(this).parents('.select').attr('id');
    var STATE_SELECTION = $(this).children().text();
    var o = $(this).attr('id');
    $('#'+i+' .selected').attr('id',o);
    $('#'+i+' .selected').text(STATE_SELECTION);
    });

$('#state_submit_btn').on('click', function () {
    var $btn = $(this).button('loading');
    gen_state(STATE_SELECTION,DATACENTER_SELECTION);
    $btn.button('reset');
});
}

Answer 1

对于一项简单的任务来说有点太多了......

你的方式，但更清洁：Fiddle Example

<强> JS ：

$(function(){
    $('.select').on('click','.option li a',function(event) {
        event.preventDefault();
        var i = $(this).closest('.select').find('span.selected').text($(this).text());
    });
    $('#state_submit_btn').on('click', function () {
        var $btn = $(this).button('loading');
        gen_state();
        $btn.button('reset');
    });

});
function gen_state() {
    var state_select = $("#state_select").find('span.selected').text();
    var center_select = $("#datacenter_select").find('span.selected').text();
    alert(state_select + " " + center_select);
    //Procceed with ajax:
}

另一件你应该知道的事情：

对于domReady执行块，语法为：

$(document).ready(function(){ /* YOUR CODE */});

不

$(document).ready() {}

您还可以使用：$(function(){ /* YOUR CODE */ });

玩得开心。

检索Bootstrap下拉选择文本

1 个答案: