繁体   English   中英

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

[英]php How can I add additional selected items to an array

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

我的设置是3个单独的列表框,类别(单选),作业(单选)和任务(多选)当用户在“类别”中选择一项时,Ajax请求将填充“作业”列表框。 当用户从Jobs中选择一项时,Ajax请求会在任务框中填充一个或多个预选项目以及未选项目。

当我尝试在预选项目清除的任务中选择其他项目时,所有这些都很好地解决了我的问题。 我需要预先选择的项目才能保持选中状态,并且能够选择其他项目。 我正在使用一个函数来选择其他项目并刷新任务列表框,以便在选择项目时不必按Ctrl键。

这是我的html

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM