檢索Bootstrap下拉選擇文本

Question

除了從下拉菜單本身的onClick事件內部之外，我似乎無法找到其他地方的操作方法，因為我需要同時獲取這兩個函數，因此它無法正常工作。

當用戶按下“提交”按鈕時，我試圖從下拉列表中檢索選定的文本值。

這是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

對於一個簡單的任務來說太多了...

你的方式，但更清潔： 小提琴的例子

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 */ });

玩得開心。