php 如何将其他选定项添加到数组中

php How can I add additional selected items to an array

本文关键字：添加数组其他 php 更新时间：2023-09-26

我在使用设置为多个的列表框时遇到问题。

我的设置是 3 个单独的列表框，类别（单选）、作业（单选）和任务（多选）当用户在"类别"中选择一个项目时，ajax 请求将填充"作业"列表框。当用户从作业中选择一个项目时，ajax 请求会用一个或多个预选项以及未选中项填充"任务"框。

当我尝试在预先选择的项目清除的任务中选择其他项目时，所有这些都很有效，我的问题引起了。我需要预先选择的项目保持选中状态并能够选择其他项目。我正在使用一个函数来选择附加项目并刷新任务列表框，这样我就不必在选择项目时按 ctrl。

这是我的网页

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<?php
  session_start();
  include('dbcon/dbconnect.php');
  $con=mysqli_connect($host,$user,$password,$db);
?>
<script> 
function getSelectedItems(){
    var items = "";
    var frm = document.forms[0].s1;
    var len = frm.length;
    for(i=0;i<len;i++){
        if(frm[i].selected){
            items += frm[i].value + "~";
        }
    }
    alert(items);
}
$(document).ready(function(){
    $("select#cat").change(function(){
        var cat_id =  $("select#cat option:selected").attr('value'); 
        $("#job").html( "" );
        if (cat_id.length > 0 ) { 
            parent.top.$("#jobbtn").val("Change Category");
            $.ajax({
                type: "POST",
                url: "fetch_jobs.php",
                data: "cat_id="+cat_id,
                cache: false,
                beforeSend: function () { 
                    $('#job').html('<img src="loader.gif" alt="" width="24" height="24">');
                },
                success: function(html) {    
                    $("#job").html( html );
                }
            });
        }
    });
    $("select#job").change(function(){
        var job_id =  $("select#job option:selected").attr('value');
        invid = 0; 
        $("#task").html( "" );
        if (job_id.length > 0 ) { 
            $.ajax({
                type: "GET",
                url: "1a.php",
                data: "job_id="+job_id+"&invid="+invid,
                cache: false,
                beforeSend: function () { 
                },
                success: function(html) {    
                    $("#task").html( html );
                    var selected = $("#task").val();
                }
            });
        }
    });
});
function getnotes(){
} 
</script>
</head>
<body>
<form id="form1"  >    
<select id="cat" size="12" style='font-style:arial;font-size:14px;'>
<?php
$result = mysqli_query($con, "SELECT CatID, Catagory FROM catagory ORDER BY Catagory");
while($row = mysqli_fetch_array($result))
{ 
  echo "<option value='"".$row['CatID']."'">".$row['Catagory']."</option>'n  ";
}
echo "</select>";
echo "<Div style='position:absolute;left:70px;top:0px;width:25px;z-index:1014;text-align:center;'>";
echo "<span id='jobl' style='position:fixed;left:180px;top:3px;font-family:Arial;font-size:15px;background-color:#FF9933 ;width:340px;height:20px;'>Jobs</span></div>";
echo "<select name='job' id='job' size='12' style='position:fixed;left:180px;top:23px;width:340px;font-size:14px;font-family:Arial;' onchange='' >";
echo "<option value='' ></option>";
echo "</select>";
echo "<Div style='position:absolute;left:70px;top:px;width:25px;z-index:1014;text-align:center;'>";
echo "<span id='taskl' style='position:fixed;left:535px;top:3px;font-family:Arial;font-size:15px;background-color:#FF9933;width:335px;height:20px;'>Tasks</span></div>";
echo "<select name='task' id='task' size='12' style='position:fixed;left:535px;top:23px;width:335px;font-size:14px;font-family:Arial;' onchange='getnotes()' multiple>";
echo "<option value='' ></option>";
echo "</select>";
echo "<input type='submit' id='taskb' name='taskb' style='position:fixed;top:330px;left:700px;width:150px;height:60px;font-size: 22px;font-weight: bold;white-space:normal;background:Lime;' value= 'Add Task->' onclick='shofinal();'></form></div>";
echo "</form>";
?>
<script>
(function() {
    var selected = {};
    $('select#task').click(function(e) {
        var $this = $(this),
            options = this.options,
            option,
            value,
            n;
        // Find out what option was just added
        value = $this.val();
        // Re-apply the selections
        for (n = 0; n < options.length; ++n) {
            option = options[n];
            if (option.value == value) {
                // The one being updated
                selected[value] = !selected[value];
            }
            // One of the others
            option.selected = !!selected[option.value];
        }
    });
})();
 </script>
</body>
</html>

我相信我的问题出在 html 末尾的脚本中，但我不确定要更改什么来解决这个问题。

我终于解决了这个问题，以为我会发布修复它的内容供其他人查看/使用

我将这个jquery添加到$（document）.ready（function（）现在，预选项目保持选中状态，新选择的项目被选中，或者如果我单击已选择的项目，它将变为未选中状态。我很确定我理解这里发生的事情，尽管我无法用语言表达出来。但它有效，我想这才是重要的。

我还从原始 html 的末尾删除了脚本，到目前为止一切都很好。

在FF中工作

 window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
    e.preventDefault();
    // toggle selection
    if (el.hasAttribute('selected')) el.removeAttribute('selected');
    else el.setAttribute('selected', '');
    // hack to correct buggy behavior
    var select = el.parentNode.cloneNode(true);
    el.parentNode.parentNode.replaceChild(select, el.parentNode);
}
}