檢索引導程序下拉選擇文本

Question

我似乎無法找到如何做到這一點，除了從dropdowns本身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 */ });

有樂趣。