2014-11-14 2 views
0

ХОРОШО,модальный появляется, когда опция выбора из выпадающего списка был выбран

Я пытаюсь сделать, чтобы появиться модальное окно, если выбран один из вариантов в раскрывающемся списке избранных. Это сработало, если вместо использования опции из select я использую простую кнопку, но мне нужно ее выбрать.

Экран меняет непрозрачность, поэтому, я думаю, я что-то делаю ... но неправильно. Очевидно, что у меня есть ссылка и скрипты из начальной загрузки, которые мне нужны, открывать и закрывать 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() {})' и избавиться от встроенной 'onchange' вещи при использовании jquery. Это все, что вам нужно, чтобы заставить его работать. – Yang

ответ

0

Удалить это: onchange="newGraph(this)" из HTML.

Добавить это:

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

в JS.

+1

. Хорошие ответы должны содержать объяснение, а не просто «копировать-вставить», чтобы заставить его работать. – Yang

+0

А также вы могли видеть, что 'function newGraph (element)' ожидает 'element' как экземпляр 'DOMElement' или селектор, а не строка, возвращаемая' $ (this) .val() '. – Yang

+0

@bad_boy, это для того, чтобы заметить проблему $ (this) .val(). Я это исправил. Однако я бы сказал, что лучшим объяснением проблемы является самодокументирующий код. Точно нулевые люди должны иметь проблему, понимающую, что делает этот код. – charles