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++;
    }   
}

我想说这段代码是非常 self 解释的。我还有一个 shiftfocus 函数，可以将焦点从子类别中选择的当前选项转移到默认选项，无论何时选择新类别，默认选项都是“无”。这基本上重置了子类别。这是代码:

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

Shiftfocus 称为 onChange，scategories 称为 onClick。

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

2) Safari:根本不起作用。

---

EDIT: Problem 2 was the product of a careless mistake. I left open an anchor tag which was creating havoc in IE. Should have double checked before bothering you guys. Sorry. Problem 1 still persists.

---

问题 2: 我了解我们开发人员中没有人特别喜欢 Internet Explorer。但我愿意相信我在这里犯了一个错误。我有一些 jQuery，它通过 native 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>

任何帮助将不胜感激。我尝试使用 alert、alert(data) 输出获取的结果，并且脚本可以很好地获取所有内容。它只是失败的追加部分:|

Answer 1

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

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

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