Question

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

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

Answer 1

这可能不是完美的解决方案，但它确实有效。您可以做的是在getState函数中传递div的id。类似于getState（countryid，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复制动态下拉菜单

1 个答案: