解决Javascript冲突

Question

我与JS存在冲突。我有两个为网站上的select元素编写的脚本。一个用于提交它没有提交按钮和一个自定义样式的选择。这里有两个：

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

它不触发列表平变化。你可以简单地在该行后面添加location.href，它应该做你想做的事：

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