使用jQuery复制动态下拉菜单

我现在有一个动态下拉菜单，一旦选择了另一个表单，就会填充其中一个表单，它看起来像这样

<script language="javascript" type="text/javascript">

function getXMLHTTP() { //function to return the xml http object
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getState(countryId) {      

        var strURL="http://mydomain.com/findClass.php?department="+countryId;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('statediv').innerHTML=req.responseText;                     
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
    }



</script>

一切都很好，但当我试图复制下拉表单时，它会出错。看到我的屏幕截图了吗

一旦显示了第二个表单并且用户选择了另一个部门，这将影响其上方的表单和原始表单。我理解为什么会发生这种情况，因为他们都有相同的ID。我只是不知道如何解决这个问题，所以当用户从表单2中选择一个部门时，它不会影响表单1中已经做过的任何事情

另外，这里是我的下拉表单的外观

<select name="department" onChange="getState(this.value)" style="float:left;">
    <option value="">Select Department</option>
    <? while ($row = mysql_fetch_assoc($res)) { ?>
    <option value="<? echo $row['id']; ?>"><? echo $row['short']. " - " .$row['full']; ?></option><? } ?>
</select>
<div id="statediv">
<select name="course" style="float:left;">
    <option>---------------</option>
        </select></div>

希望这是有意义的

这是jQuery

(function($) {

    $.fn.relCopy = function(options) {
        var settings = jQuery.extend({
            excludeSelector: ".exclude",
            emptySelector: ".empty",
            copyClass: "copy",
            append: '',
            clearInputs: true,
            limit: 0 // 0 = unlimited
        }, options);

        settings.limit = parseInt(settings.limit);

        // loop each element
        this.each(function() {

            // set click action
            $(this).click(function(){
                var rel = $(this).attr('rel'); // rel in jquery selector format             
                var counter = $(rel).length;

                // stop limit
                if (settings.limit != 0 && counter >= settings.limit){
                    return false;
                };

                var master = $(rel+":first");
                var parent = $(master).parent();                        
                var clone = $(master).clone(true).addClass(settings.copyClass+counter).append(settings.append);

                //Remove Elements with excludeSelector
                if (settings.excludeSelector){
                    $(clone).find(settings.excludeSelector).remove();
                };

                //Empty Elements with emptySelector
                if (settings.emptySelector){
                    $(clone).find(settings.emptySelector).empty();
                };                              

                // Increment Clone IDs
                if ( $(clone).attr('id') ){
                    var newid = $(clone).attr('id') + (counter +1);
                    $(clone).attr('id', newid);
                };

                // Increment Clone Children IDs
                $(clone).find('[id]').each(function(){
                    var newid = $(this).attr('id') + (counter +1);
                    $(this).attr('id', newid);
                });

                //Clear Inputs/Textarea
                if (settings.clearInputs){
                    $(clone).find(':input').each(function(){
                        var type = $(this).attr('type');
                        switch(type)
                        {
                            case "button":
                                break;
                            case "reset":
                                break;
                            case "submit":
                                break;
                            case "checkbox":
                                $(this).attr('checked', '');
                                break;
                            default:
                              $(this).val("");
                        }                       
                    });                 
                };

                $(parent).find(rel+':last').after(clone);

                return false;

            }); // end click action

        }); //end each loop

        return this; // return to jQuery
    };

})(jQuery);


<script type="text/javascript">
$(function(){
  var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false"><img src="images/bullet_minus.png" /></a>';
$('a.add').relCopy({ append: removeLink});  
});


</script>

---

这可能不是一个完美的解决方案，但它可以工作。您可以做的是在getState函数中传递div的id。 类似于getStateConomryId，divid

在red.readystate函数中，您可以执行以下操作

req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById(divid).innerHTML=req.responseText;                     
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           

---

我不确定jquery脚本到底在做什么，但您可以将所有的XMLHTTP请求转换为jquery，这非常简单。

jquery在哪里？我似乎没有找到它。@kingjiv opps对不起，我现在添加了它。与您的问题不完全相关，但您可能更喜欢使用jQuery的$.ajax方法，而不是原始的XMLHTTP。