Javascript，Jquery，跨浏览器问题，挫折

Question

我主要是 PHP 开发人员。我意识到，在当今时代，一种脚本语言的专业化并不能解决问题，但事实仍然是，我在 JavaScript 和 jQuery 方面的技能还算不错。我充其量是个新手。我可以创建自己的代码，但跨浏览器兼容性仍然是我在 JavaScript 中工作的一个大问题。

无论如何，我有一个根据类别/子类别过滤产品的脚本。它是这样工作的：您选择一个类别，后台的 javascript 会过滤子类别，以便显示的选项是与父类别相关的选项 - 这两者的组合过滤了产品线。

这是我的代码：

function scategories(){

    //get the category option value from the category drop down bar
    var cat = (document.getElementById('categories').value);

    //get all the options from the subcategory drop down bar
    var subcat = document.getElementsByClassName('subcategories');

    var n=0;

    //if the category bar option is set to 0 display everything
    if(Number(cat)==0){
        Show(); 
    }

    //filter the subcategories
    while(subcat.item(n)){

        //if there is no match b/w the subcategories option and the categories id FILTER
        if(Number((subcat.item(n).value).split('|')[1]) != Number(cat) && Number(subcat.item(n).value) != 0){
            document.getElementsByClassName('subcategories')
                .item(n)
                .style
                .display="none";    
        }else{

            //else display the subcategory
            document.getElementsByClassName('subcategories')
                .item(n)
                .style
                .display="list-item";   
        }
        n++;
    }   
}

我想说，这段代码很容易解释。我还有一个ShiftFocus函数，将焦点从子类别中选择的当前选项转移到默认情况下，只要选择一个新的类别，就会“无”。这基本上重置了子类别。这是代码：

    function shiftfocus(){
        document.getElementsByClassName('subcategories')
            .item(0)
            .removeAttribute("selected");
        document.getElementsByClassName('subcategories')
            .item(0)
            .setAttribute("selected","selected");
    }

Shiftfocus 称为 onChange，类别称为 onClick。

问题 1： 1) Firefox：Shiftfocus 不会将焦点转移到默认选项，即使我可以看到它添加了 'selected' 属性。

2) Safari：根本不工作。

---

编辑：问题 2 是一个粗心错误的产物。我打开了一个锚标签，它是 在 IE 中造成严重破坏。在打扰你之前应该仔细检查一下 伙计们。对不起。问题 1 仍然存在。

---

问题 2： 我了解我们中没有一个开发人员特别喜欢 Internet Explorer。但我愿意相信我在这里犯了一个错误。我有一些 jQuery，它通过本机 POST 函数从另一个文件中的脚本中获取数据，并将其附加到 id 为“content”的表中。这适用于除 IE 之外的所有浏览器。如果我尝试回到 IE 7,8 兼容模式，结果会好一些（尽管数据显示为碎片），并且在 IE9 兼容模式下根本没有附加任何内容！代码如下：

$.post("bagcontents.php", { 
    "Bid": $(this).attr('bid')
},
function(data){
    $("#content").empty().append(data);
    roundNumber();
    $('#processorder_hidden').attr('value',currentBid);
});


//append here
<div id="contents" style="overflow:auto;height:345px;padding-right:5px;">
    <form name="bag_contents" id="bag_contents" method="post" action="<?php _page ;?>">
        <table id="content">
        </table>           
        <input type="hidden" id="bag_contents_hidden" name="bag_contents_hidden" value="1" />       
    </form>
</div>

任何帮助将不胜感激。我尝试使用警报、警报（数据）输出获取的结果，并且脚本可以正常获取所有内容。它只是失败的附加部分：|

Answer 1

这里有一些建议，希望对您有所帮助。

问题：1 您没有尝试将 shiftfocus() 设置为特定值，而是尝试使用 .val('') 来清除它。我可以想象这将默认为第一个选项。

问题：2 如果不知道从服务器返回什么数据，这将很难调试。可能是格式错误或呈现的输出存在语法错误。