javascript - 单击选择框时的 Ajax 弹出窗口

Question

我已经使用 JavaScript 在 ListView 上创建了一个 ajax 弹出窗口，查看下面的 img :

请注意这是 ListView 而非选择框

点击任何我使用过 Ajax Pop up 的产品，它也能正常工作，检查下图:

---

现在我的主要用途是我想使用 SELECT BOX 而不是 LIST VIEW，所以我如何在从 ListView 中选择选项后传递一个值并将其传递给 AJAX MODAL

---

我的代码:

<ul class="no-js" style="margin: 0px; float: left;">
    <li><b>Product Selection : </b> <a class="clicker" id="select">Add Item...</a>
        <ul style="max-height:200px; overflow:auto;">
            <li id="animation-switcher"><a href="#selectPro" class="proModal" data-id="1~2">Product 01 </a></li>
            <li id="animation-switcher"><a href="#selectPro" class="proModal" data-id="2~2">Product 02</a></li>
            <li id="animation-switcher"><a href="#selectPro" class="proModal" data-id="3~2">Product 03</a></li>
                </ul>
    </li>
    </ul>

我的 AJAX 代码:

$('a.proModal').click(function(){
                var qid = $(this).attr('data-id');
                $.ajax({
                    type: "POST",
                    url: "phpajaxfile.php", // 
                    data: 'ProSelectid='+qid,
                    success: function(msg){
                        $(".selectForm").html(msg);
                        //$.magnificPopup.close();
                    },
                    error: function(){
                        alert("failure");
                        $.magnificPopup.close();
                    }
                });

            });

---

我想用选择框替换 ul li 并将值传递给 ajax 文件..？？

Answer 1

就这么简单:

<select class="selectprod">
   <option value="1~2"">Product 1</option>
   <option value="2~2">Product 2</option>
   <option value="3~1">Product 3</option>
</select>

你的js会是

$('.selectprod').on('change',function(){
     var qid = $(this).find('option:selected').val();
     $.ajax({
             type: "POST",
             url: "phpajaxfile.php", // 
             data: 'ProSelectid='+qid,
             success: function(msg){
                  $(".selectForm").html(msg);
                  //$.magnificPopup.close();
             },
             error: function(){
                  alert("failure");
                  $.magnificPopup.close();
             }
     });
});

您可以使用以下代码打开模态[假设是引导模态]!!当你想调用它时放置它:

$('#myModal').modal('show');