2014-11-14 139 views
0

WEll,從選擇下拉菜單中選擇選項時出現的模式

如果選擇了選擇下拉菜單中的某個選項,我試圖顯示一個模式窗口。如果不是使用select中的選項,而是使用簡單的按鈕,但是我需要從select中選擇它,它確實有效。

屏幕雖然改變了它的不透明度,所以我想我正在做一些事情......但錯了。很明顯,我有我需要的bootstrap鏈接和腳本,打開並關閉doc和html。

有什麼建議嗎?

謝謝youuu

html 
------------------------------------------------------------------------ 
    <select id="selectAction" data-style="btn-info" onchange="newGraph(this)"> 
     <option value="" disabled selected>Select your option:</option> 
     <option value="create">Create a new graph</option> 
     <option value="recall">Recall a saved graph</option> 
     </select> 

     <!--Pop up window--> 

     <div data-toggle="modal" data-target="#popUp1"> //it works if I put this in a <button> instead a div, but then, I have to click to button to make the modal to work so it in not what I want. 
<div class="modal hide fade" id="popUp1" tabindex="-1" role="dialog" aria-labelledby="popUp1" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4>Creating a new graph:</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Here some text</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-success">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
    </div> 


script 
-------------------------------------------------------------------------------- 
function newGraph(element) { 
    if($(element).val() === 'create') { 
    $('.toolsHeader').show(); 
    $('#popUp1').modal(); 
     $('#selectAction').hide(); 
    } 
    else{ 
    return false; 
    }}; 
+0

您需要將所有內容放入'$(function(){})'中,並在使用jquery時擺脫inline'onchange'事物。這就是你需要的所有東西 – Yang 2014-11-14 13:25:42

回答

0

刪除此:onchange="newGraph(this)"從HTML。

補充一點:

$('#selectAction').change(function() { 
    newGraph($(this)); 
}); 

的JS。

+1

好的答案應該提供一個解釋,而不僅僅是「複製粘貼」來使它工作 – Yang 2014-11-14 13:19:14

+0

而且,你可以看到'function newGraph(element)'期望'element'是一個實例'DOMElement'或選擇器,而不是'$(this).val()'返回的字符串。 – Yang 2014-11-14 13:23:22

+0

@bad_boy,這是爲了注意$(this).val()問題。我修正了這一點。然而,我會認爲對問題的最好解釋是自我記錄代碼。恰好爲零的人應該理解這個代碼的作用。 – charles 2014-11-14 16:27:35