Question

我遇到了设置为多个列表框的问题。

我的设置是3个单独的列表框，类别（单选），作业（单选）和任务（多选）当用户在“类别”中选择一个项目时，ajax请求会填充“作业”列表框。当用户从“作业”中选择一个项目时，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末尾的脚本中，但我不确定要修改什么来解决这个问题。

Answer 1

我终于得到了解决这个问题，我想发布一些修复它以供其他人查看/使用

的内容

我将这个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);
}
}

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

1 个答案: