解决 Javascript 冲突

Question

我和JS有冲突。我为网站上的选择元素编写了两个脚本。一种用于在没有提交按钮的情况下提交它，另一种用于自定义选择样式。下面是其中的两个：

 <script type="text/javascript"><!--
                var dropdown = document.getElementById("stallions");
                function onStallion() {
                  if ( dropdown.options[dropdown.selectedIndex].value != null ) {
                    location.href = dropdown.options[dropdown.selectedIndex].value;
                  }
                }
                dropdown.onchange = onStallion;
            --></script>

---

  // Jquery plugin for styling selectboxes from DressCode.

$(document).ready(function(){
// first locate all of the select tags on the page and hide them
$("select#stallions").css('display','none');
//now, for each select box, run this function
$("select#stallions").each(function(){

    var curSel = $(this);
    // get the CSS width from the original select box
    var gddWidth = $(curSel).css('width');
    var gddWidthL = gddWidth.slice(0,-2);
    var gddWidth2 = gddWidthL - 28;
    var gddWidth3 = gddWidthL - 16;
    // build the new div structure
    var gddTop = '<div style="width:' + gddWidthL + 'px" class="selectME" tabindex="0"><div class="cornerstop"><div><div></div></div></div><div class="middle"><div><div><div>';
    //get the default selected option
    var whatSelected = $(curSel).children('option:selected').text();
    //write the default
    var gddFirst = '<div class="first"><span class="selectME gselected" style="width:'+ gddWidth2 +  'px;">'+ whatSelected +'</span><span id="arrowImg"></span><div class="clears"></div></div><ul class="selectME">';
    // create a new array of div options from the original's options
    var addItems = new Array();      
    $(curSel).children('option').each( function() {           
        var text = $(this).text();  
        var selVal = $(this).attr('value'); 
        var before =  '<li style="width:' + gddWidthL + 'px;"><a href="#" rel="' + selVal + '" tabindex="0"  style="width:' + gddWidth3 + 'px;">';
        var after = '</a></li>';           
        addItems.push(before + text + after);
    });
    //hide the default from the list of options 
    var removeFirst = addItems.shift();
    // create the end of the div selectbox and close everything off
    var gddBottom ='</ul></div></div></div></div><div class="cornersbottom"><div><div></div></div></div></div>'
    //write everything after each selectbox
    var GDD = gddTop + gddFirst + addItems.join('') + gddBottom;
    $(curSel).after(GDD);
    //this var selects the div select box directly after each of the origials
    var nGDD = $(curSel).next('div.selectME');

    $(nGDD).find('li:first').addClass("first");

    $(nGDD).find('li:last').addClass('last');
    //handle the on click functions - push results back to old text box
    $(nGDD).click( function(e) {
         var myTarA = $(e.target);
         var myTarT = $(e.target).text();
         var myTar = $(e.target);
         //if closed, then open
         if( $(nGDD).find('li').css('display') == 'none')
            {
                    //this next line closes any other selectboxes that might be open
                    $('div.selectME').find('li').css('display','none');
                    $(nGDD).find('li').css('display','block');

                    //if user clicks off of the div select box, then shut the whole thing down
                    $(document.window || 'body').click( function(f) {
                            var myTar2 = $(f.target);
                            if (myTar2 !== nGDD) {$(nGDD).find('li').css('display','none');}
                    });
                            return false;
            }
            else
            {      
                    if (myTarA == null){
                        $(nGDD).find('li').css('display','none');
                                return false;
                            }
                            else {
                                //set the value of the old select box
                                $(curSel).val(myTarA);
                                //set the text of the new one
                                 $(nGDD).find('span.gselected').text(myTarT);
                                 $(nGDD).find('li').css('display','none');
                                 return false;
                            }
            }
    //handle the tab index functions
     }).focus( function(e) {        


         $(nGDD).find('li:first').addClass('currentDD');
         $(nGDD).find('li:last').addClass('lastDD');
         function checkKey(e){
            //on keypress handle functions
            function moveDown() {
                var current = $(nGDD).find('.currentDD:first');
                var next = $(nGDD).find('.currentDD').next();
                if ($(current).is('.lastDD')){
                return false;
                } else {
                    $(next).addClass('currentDD');
                    $(current).removeClass('currentDD');
                }
            }
            function moveUp() {
                var current = $(nGDD).find('.currentDD:first');
                var prev = $(nGDD).find('.currentDD').prev();
                if ($(current).is('.first')){
                return false;
                } else {
                    $(prev).addClass('currentDD');
                    $(current).removeClass('currentDD');
                }
            }
            var curText = $(nGDD).find('.currentDD:first').text();
            var curVal = $(nGDD).find('.currentDD:first a').attr('rel');
           switch (e.keyCode) {
                case 40:
                    $(curSel).val(curVal);
                    $(nGDD).find('span.gselected').text(curText);
                    moveDown();
                    return false;
                    break;
                case 38:
                    $(curSel).val(curVal);
                    $(nGDD).find('span.gselected').text(curText);
                    moveUp();
                    return false;
                    break;
                case 13:
                    $(nGDD).find('li').css('display','none');
                    }     
        }
        $(document).keydown(checkKey);  
    }).blur( function() {
            $(document).unbind('keydown');
    });
});
});

第一个嵌入到页面的 php 文件中，第二个从外部 js 文件中拉入。我测试了一下，我知道这是他们两个之间的冲突。如果我使用第二个脚本，则提交的第一个脚本将不起作用。如果我删除第二个脚本，它就可以正常工作。

我很乐意就导致错误的原因以及如何解决它获得任何帮助。感谢您的帮助！

Answer 1

问题在于 DressDown 代码与下拉菜单交互的方式。

其中有这一行（第 69 行）：

//set the value of the old select box
$(curSel).val(myTarA);

它不会触发列表的 onchange。您可以简单地在该行之后添加 location.href ，这应该可以实现您想要的功能：

....
//set the value of the old select box
$(curSel).val(myTarA);
location.href = myTarA;
//set the text of the new one
....