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

}

试图在jquery中使用模态对话框

4 个答案: