Question

我有一个自动完成的文本框，用户可以在其中插入一个演员名称，并且工作正常。有一个按钮＆＃34;浏览电影＆＃34;这应该填充一个动态下拉列表，显示用户在文本框中插入的actor的电影列表。此外，还有另一个按钮＆＃34;添加到列表＆＃34;如果用户点击它，则该下拉列表（电影）的所选选项将被添加到另一个下拉列表中，该下拉列表显示用户选择的所有电影。

问题

当用户点击按钮时，我可以动态填充下拉列表，也可以将所选选项移动到新的下拉列表（selecteditems），但问题是我想在新的弹出窗口中显示此下拉列表（不在用户在文本框中插入的同一页面）。我真的不知道该怎么做..我应该在target.html（新的弹出窗口）中进行ajax调用吗？如果有人能让我知道如何做到这一点，我感激不尽。

这就是我的尝试：

<script type="text/javascript">
$(document).ready(function () {
  $("#tags").autocomplete({
           source: "actorsauto.php",
           minLength: 2,
           select: function (event, ui){
                    $("#tags").on('autocompletechange change', function (){
                         var selectedVal = $(this).val(); //this will be your selected value from autocomplete
                 // Here goes your ajax call.      
                       $.post("actions.php", {q: selectedVal}, function (response){
                               console.log(response);
                               $("#movieName").html(response).show();
                        });
                    }).change();
             }
 });

$('#btnRight').on('click', function (e) {
         var selectedOpts = $('#movieName option:selected');
         if (selectedOpts.length == 0) {
             alert("Nothing to move.");
             e.preventDefault();
         }

         $('#selectedItems').append($(selectedOpts).clone());
         $(selectedOpts).remove();
         $("#movieName").hide();
         $("#tags").val("");
        e.preventDefault();
 });

     function openWindow() { 
        window.open("target.html","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); 
     } 
  </script>

<html>
<body>
<input type="textbox" name= "tag" id="tags" style="display:none;" placeholder="Enter an actor/actress name here" />
<input type=button onclick="javascript:openWindow()" value="Browse movies by this actor">
<select id="movieName" name="movieName[]" multiple="multiple" width="200px" size="10px" style=display:none;>
<input type="button" value=">> Add to selected list >>" id="btnRight" style="display:none;" />
<select id="selectedItems" name="selectedItems[]" multiple="multiple" style="width:200px; size:10px;">
</select>
</select>
</body>
</html>

Answer 1

你可以尝试这样的事情。对不起，如果有任何错误或是垃圾

<强> target.html上

// this goes in target.html
$('#tags').autocomplete({
    source: "actorsauto.php",
    minLength: 2,
    select: function (event, ui) {
        $("#tags").on('autocompletechange change', function () {
            var selectedVal = $(this).val(); //this will be your selected value from autocomplete
            // Here goes your ajax call.
            // here's some magic. using window.opener allows you 
            // to access variables and functions defined in the parent window.      
            window.opener.getMovies(selectedVal);
        }).change();
    }
});

<强> page.html中

// this stays in your parent window
function getMovies(value) {
    $.post("actions.php", { q: value}, function (response) {
        console.log(response);
        $("#movieName").html(response).show();
    });
}

在新弹出窗口中使用ajax调用

问题

1 个答案: