試圖在jquery中使用模式對話框

Question

我有一些if/else語句在下面的代碼中（下面的代碼和JSFiddle here），我試圖在用戶從下拉菜單中選擇第三個選項時使用confirmModal dialog。

$(document).ready(function() { 
    var dropdownSelectionItem = $("#name").val(); 
    console.log("Check:" + dropdownSelectionItem); 

    if (dropdownSelectionItem == "First") { 
     //alert("Are you sure you want to select first option?"); 
     id_value = 1000; 
    } else if (dropdownSelectionItem == "Second") { 
     id_value = 2000; 
    } else if (dropdownSelectionItem == "Third") { 
     //alert("Are you sure you want to select third option?"); 
     $('#content').confirmModal({ 
      topOffset : 0, 
      onOkBut : function() { 
       id_value = 3000; 
      }, 
      onCancelBut : function() {}, 
      onLoad : function() {}, 
      onClose : function() {} 
      }); 
    } else if (dropdownSelectionItem == "Fourth") { 
     id_value = 4000; 
    } 
}); 

<select class="form-control" id="name"> 
    <option value="First">First</option> 
    <option value="Second">Second</option> 
    <option value="Third">Third</option> 
    <option value="Fourth">Fourth</option>            
</select> 

<!-- 
    <button data-confirmmodal-bind="#content" data-topoffset="0" data-top="0">example</button> 
--> 

爲什麼它不工作？我在使用圖書館時有什麼問題嗎？我不確定是否要使用#content id，如示例中所示。

Answer 1

您有幾個問題。

首先，正如其他人所提到的，您只在頁面加載時運行腳本一次，而不是binding to an event - 在此情況下，下拉式事件爲change。其次，由於您的HTML代碼沒有任何元素，其ID爲content，因此您的模式未顯示（因爲它已設置爲顯示#content）。

作爲一個側面說明，通過查看開發人員控制檯可以看出這一點。 popscript.js會拋出一個錯誤，並且通過使用開發人員控制檯中的工具，我能夠快速查看問題。如果你不知道如何使用瀏覽器的開發者控制檯，invest in learning how

下面是一個Updated Fiddle，並且更新的代碼：

腳本：

// Shorthand no-conflict safe document ready 
jQuery(function($) { 
    // Bind the "checkSelection" function to the change of the select dropdown 
    $('#name').on('change', checkSelection); 

    // The code you had, but put into a function so we can call when we want 
    function checkSelection() { 
    var dropdownSelectionItem = $("#name").val(); 
    console.log("Check:" + dropdownSelectionItem); 

    if (dropdownSelectionItem == "First") { 
     alert("Are you sure you want to select first option?"); 
     id_value = 1000; 
    } else if (dropdownSelectionItem == "Second") { 
     id_value = 2000; 
    } else if (dropdownSelectionItem == "Third") { 
     alert("Are you sure you want to select third option?"); 
     $('#content').confirmModal({ 
     topOffset: 0, 
     onOkBut: function() { 
      id_value = 3000; 
     }, 
     onCancelBut: function() {}, 
     onLoad: function() {}, 
     onClose: function() {} 
     }); 
    } else if (dropdownSelectionItem == "Fourth") { 
     id_value = 4000; 
    } 
    } 
}); 

HTML：

<select class="form-control" id="name"> 
    <option value="First">First</option> 
    <option value="Second">Second</option> 
    <option value="Third">Third</option> 
    <option value="Fourth">Fourth</option> 
</select> 

<!-- Copied straight from the demo for the confirmModal script --> 
<div style="display:none"> 
    <div id="content"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing 
    software like Aldus PageMaker including versions of Lorem Ipsum. 
    <div class="popModal_footer"> 
     <button type="button" class="btn btn-primary" data-popmodal-but="ok">ok</button> 
     <button type="button" class="btn btn-default" data-popmodal-but="cancel">cancel</button> 
    </div> 
    </div> 
</div> 

Answer 2

您需要爲下拉更改時創建事件處理程序。現在，這個JS只會在文檔加載時運行。已更新JSFiddle

$(document).ready(function(){ 

    $(document).on('change','#name',function(){ 
     var dropdownSelectionItem = $("#name").val(); 
     console.log("Check:" + dropdownSelectionItem); 

     if (dropdownSelectionItem == "First") { 
      alert("Are you sure you want to select first option?"); 
      id_value = 1000; 
     } else if (dropdownSelectionItem == "Second") { 
      id_value = 2000; 
     } else if (dropdownSelectionItem == "Third") { 
      alert("Are you sure you want to select third option?"); 
     $('#content').confirmModal({ 
      topOffset : 0, 
      onOkBut : function() { 
       id_value = 3000; 
     }, 
      onCancelBut : function() {}, 
      onLoad : function() {}, 
      onClose : function() {} 
     }); 
     } else if (dropdownSelectionItem == "Fourth") { 
      id_value = 4000; 
     } 
    }); 
}); 

Answer 3

您的當前代碼僅在文檔準備就緒時運行一次。

你想要做的是創建一個onchange事件。

$(document).ready(function() { 
    $('#name').on('change', dropdownchange); 
}); 




function dropdownchange() { 
    var dropdownSelectionItem = $("#name").val(); 

    console.log("Check:" + dropdownSelectionItem); 


    if (dropdownSelectionItem == "First") { 
     alert("Are you sure you want to select first option?"); 
     id_value = 1000; 
    } else if (dropdownSelectionItem == "Second") { 
     id_value = 2000; 
    } else if (dropdownSelectionItem == "Third") { 
     alert("Are you sure you want to select third option?"); 
     $('#content').confirmModal({ 
      topOffset: 0, 
      onOkBut: function() { 
      id_value = 3000; 
     }, 
     onCancelBut: function() {}, 
     onLoad: function() {}, 
     onClose: function() {} 
    }); 
    } else if (dropdownSelectionItem == "Fourth") { 
     id_value = 4000; 
    } 
} 

Answer 4

您正在將此添加到頁面的onload/load事件中。

您需要做的是將其添加到下拉/選擇的事件onchange事件中。

$(function)() { 

    $("#name").change(function() { 
      //add your code yere 
    }); 

}