Question

我使用JavaScript在列表视图上创建了一个ajax弹出窗口，请查看下面的img：

请注意，这是LIST VIEW＆amp; NOT SELECT BOX

点击我使用过的Ajax Pop up产品也正常工作，请查看下图： enter image description here

现在我的主要用途是我想使用SELECT BOX而不是LIST VIEW，那么如何在列表视图中选择选项之后传递一个值并将其传递给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');

选择框上的Ajax Popup单击

1 个答案: