文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何将事件应用于克隆元素？

问如何将事件应用于克隆元素？
EN

Stack Overflow用户
提问于 2015-09-19 14:41:42
回答 1查看 54关注 0票数 0

有人能帮我吗？

我正在尝试做一个订购系统，一切都进行得很好，但我们的顾问指出，我们需要让用户有一个选择，在一个事务上订购多个项目。把我搞砸了。我在谷歌上搜索了很多关于JQueries和JScripts的信息，但我终于找到了一个死胡同。

我现在拥有的是：

HTML(orderform.html)：

代码语言：javascript
复制
<html>
<head> <link rel="stylesheet"
        type="text/css" 
        href="css/contentFrame.css">

        <script src="jscript/protoScript.js"></script> 
        <script src="jscript/jquery-1.11.3.js"></script>
        <script src="jscript/JQueryTest.js"></script>
</head>

<meta charset="utf-8">
<title>Untitled Document</title>

<body>
    <div class="formBlock">
        <h2 id="formHeader">Order Form</h2>
        <form method="POST" action="orderInfoReceiver.php">
            <table align="center">
                <tr>
                    <td height="100%">
                        <fieldset>
                            <legend>Contact Details</legend>    
                            Last Name:
                            <br>
                            <input type="text" name="lName">
                            <br>
                            First Name:
                            <br>
                            <input type="text" name="fName">
                            <br>
                            Middle Name:
                            <br>
                            <input type="text" name="mName">
                            <br>
                            Email Address: 
                            <br>
                            <input type="text" name="email">
                        </fieldset> 
                    </td>
                    <td height="100%">
                        <fieldset>
                            <br>
                            <legend>Product Information</legend>  
                            <div id="input1" style="margin-bottom:4px;" class="clonedInput">

                            Item Name: 
                            <br>
                            <select id="product" name="product" onchange="setOptions()">
                                <option>Please Select an Item
                                <option>Dry Chemical
                                <option>HCFC 123 (Manual)
                                <option>HCFC 123 (Therman)
                                <option>HCFC 123 (Ceiling)
                                <option>HCFC 236 fa (Manual)
                                <option>HCFC 236 fa (Therman)
                                <option>HCFC 236 fa (Ceiling)
                                <option>AFFF (Steel Cylinder)
                                <option>AFFF (Stainless Cylinder)
                                <option>CO2 (Carbon Dioxide)
                            </select>
                            <br>
                            Capacity:
                            <br>
                            <select id="capacity" name="capacity">
                                <option> --
                            </select>    
                            <input type="radio" name="type" value="New">New <input type="radio" name="type" value="Refill">Refill
                            <br>
                            <br>
                            Quantity:
                            <br>
                            <input type="number" min="0" name="quantity">
                            <br>
                            <br>
                            <br>
                            </div>
                            <input type="button" id="btnAdd" value="+"> <input type="button" id="btnDel" value="-"> 
                        </fieldset> 
                    </td>
                    <td height="100%">
                        <fieldset>
                            <br>
                            <br>
                            <legend>Address</legend> 
                            Street: 
                            <br>
                            <input type="text" name="street"> 
                            <br>
                            <br>
                            City: 
                            <br>
                            <input type="text" name="city"> 
                            <br>
                            <br>
                            <br>
                        </fieldset> 
                    </td>
                </tr>
            </table>  
            <center><input type="submit" value="Submit"></center>
        </form>
        <br>
    </div>

</body>

​

JQuery(JQueryTest.js)是从http://charlie.griefer.com中提取并修改的。我有很多用于克隆的代码，但这是我唯一能用我现在的表单工作的代码。

代码语言：javascript
复制
 $(document).ready(function() {
        $('#btnAdd').click(function() {
            var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#input' + num).clone(true, true).attr('id', 'input' + newNum);

            // manipulate the name/id values of the input inside the new element
            newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

            // insert the new element after the last "duplicatable" input field
            $('#input' + num).after(newElem);

            // enable the "remove" button
            $('#btnDel').removeAttr('disabled');

            // business rule: you can only add 5 names
            if (newNum == 5)
                $('#btnAdd').attr('disabled','disabled');
        });

        $('#btnDel').click(function() {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').removeAttr('disabled');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $('#btnDel').attr('disabled','disabled');
    });

JScript(protoScript.js)我也是从搜索中得到的，但我忘了是哪个站点：

代码语言：javascript
复制
function addOption(selectId) {
    var x = document.getElementById(selectId);
    var y = new Option('Test option W3C');
    x.add(y,x.options[x.options.length]);
    // for IE use x.add(y,2);
}


function appendOptionLast(selectID, num){
    var elSel = document.getElementById(selectID);

    var elOptNew = document.createElement('option');
    elOptNew.text = num;
    elOptNew.value = num;


    try {
        elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
    }
    catch(ex) {
        elSel.add(elOptNew); // IE only
    }
}

function removeAllOptions(selectID){
    var elSel = document.getElementById(selectID);
    elSel.options.length = 0
    if (elSel.length > 0){
        elSel.remove(0);
    }
}

function addAllOptions(selectID, values){
    var arrayLength = values.length;
    for (var i = 0; i < arrayLength; i++) {
        appendOptionLast(selectID,values[i]);
    }
}


function setOptions(){
    var product = document.getElementById("product");
    // removeAllOptions('capacity');
    document.getElementById('capacity').options.length = 0
    var selIndex = product.selectedIndex;
    if(selIndex == 1)
        addAllOptions('capacity', ["2 lbs","3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs", "100 lbs", "150 lbs", "200 lbs"]);
    else if(selIndex == 2){
        addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
    }
    else if(selIndex == 3){
    addAllOptions('capacity', ["10 lbs", "15 lbs", "20 lbs"]);
    }
    else if(selIndex == 4){
        addAllOptions('capacity', ["10 lbs", "20 lbs"]);
    }
    else if(selIndex == 5){
        addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
    }
    else if(selIndex == 6){
        addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
    }
    else if(selIndex == 7){
        addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
    }
    else if(selIndex == 8){
        addAllOptions('capacity', ["10 lbs", "15 lbs", "20 lbs", "25 lbs", "50 lbs", "100 lbs", "200 lbs"]);
    }
    else if(selIndex == 9){
        addAllOptions('capacity', ["20 lbs", "25 lbs", "50 lbs"]);
    }
    else if(selIndex == 10){
        addAllOptions('capacity', ["5 lbs", "10 lbs", "15 lbs", "50 lbs"]);
    }
    else{
        addAllOptions('capacity', ["--"]);
    }
}

onchange <select id='product>' 上的事件( on )也与克隆表单一起工作，这使I陷入了死胡同。

我也尝试过使用clone(true, true)，但无法使它工作。

我也有自定义css，它只包含非常基本的设计，所以我会认为它没有必要包括在内。

请注意，我们只学习了基本的HTML，直到我回想起基本的-up、C#和C#。这是我第一次尝试编写JScripts和JQueries代码，而我遇到的困难是哪一个。

html
forms
javascript
jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-19 15:20:30

下面是一个有用的例子(我已经删除了大多数与这个问题无关的HTML )。

首先，元素id必须是整个html文档中唯一的，所以我从select中删除了id。

然后，这只是将正确的元素传递给setOptions中的onchange的问题。

代码语言：javascript
复制
<select name="product" onchange="setOptions(this)">

在setOptions(product)中，我们还更改代码以使用相对查询查找capacity选择，因为我们不能再使用#capacity了：

代码语言：javascript
复制
 var capacity = $(product).closest('div').find('select[name="capacity"]')[0];

​

代码语言：javascript
复制
function appendOptionLast(elSel, num){
    
    var elOptNew = document.createElement('option');
    elOptNew.text = num;
    elOptNew.value = num;


    try {
        elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
    }
    catch(ex) {
        elSel.add(elOptNew); // IE only
    }
}

function removeAllOptions(selectID){
    var elSel = document.getElementById(selectID);
    elSel.options.length = 0
    if (elSel.length > 0){
        elSel.remove(0);
    }
}

function addAllOptions(elSel, values){
    var arrayLength = values.length;
    for (var i = 0; i < arrayLength; i++) {
        appendOptionLast(elSel,values[i]);
    }
}


function setOptions(product){
    var capacity = $(product).closest('div').find('select[name="capacity"]')[0];
    
    // removeAllOptions('capacity');
    capacity.options.length = 0
    var selIndex = product.selectedIndex;
    if(selIndex == 1)
        addAllOptions(capacity, ["2 lbs","3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs", "100 lbs", "150 lbs", "200 lbs"]);
    else if(selIndex == 2){
        addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
    }
    else if(selIndex == 3){
    addAllOptions(capacity, ["10 lbs", "15 lbs", "20 lbs"]);
    }
    else if(selIndex == 4){
        addAllOptions(capacity, ["10 lbs", "20 lbs"]);
    }
    else if(selIndex == 5){
        addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
    }
    else if(selIndex == 6){
        addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
    }
    else if(selIndex == 7){
        addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
    }
    else if(selIndex == 8){
        addAllOptions(capacity, ["10 lbs", "15 lbs", "20 lbs", "25 lbs", "50 lbs", "100 lbs", "200 lbs"]);
    }
    else if(selIndex == 9){
        addAllOptions(capacity, ["20 lbs", "25 lbs", "50 lbs"]);
    }
    else if(selIndex == 10){
        addAllOptions(capacity, ["5 lbs", "10 lbs", "15 lbs", "50 lbs"]);
    }
    else{
        addAllOptions(capacity, ["--"]);
    }
}





////////////////////////////////




$(document).ready(function() {
        $('#btnAdd').click(function() {
            var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#input' + num).clone(true, true).attr('id', 'input' + newNum);

            // manipulate the name/id values of the input inside the new element
            newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
          
            // clear the options of the clone.
            setOptions( $(newElem).find('select[name="product"]') );
          
            // insert the new element after the last "duplicatable" input field
            $('#input' + num).after(newElem);

            // enable the "remove" button
            $('#btnDel').removeAttr('disabled');

            // business rule: you can only add 5 names
            if (newNum == 5)
                $('#btnAdd').attr('disabled','disabled');
        });

        $('#btnDel').click(function() {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').removeAttr('disabled');

            // if only one element remains, disable the "remove" button
            if (num-1 == 1)
                $('#btnDel').attr('disabled','disabled');
        });

        $('#btnDel').attr('disabled','disabled');
    });
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="POST" action="orderInfoReceiver.php">
  <fieldset>
    <br>
    <legend>Product Information</legend>  
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">

      Item Name: 
      <br>
      <select name="product" onchange="setOptions(this)">
        <option>Please Select an Item
        <option>Dry Chemical
        <option>HCFC 123 (Manual)
        <option>HCFC 123 (Therman)
        <option>HCFC 123 (Ceiling)
        <option>HCFC 236 fa (Manual)
        <option>HCFC 236 fa (Therman)
        <option>HCFC 236 fa (Ceiling)
        <option>AFFF (Steel Cylinder)
        <option>AFFF (Stainless Cylinder)
        <option>CO2 (Carbon Dioxide)
      </select>
      <br>
      Capacity:
      <br>
      <select name="capacity">
        <option> --
      </select>    
      <input type="radio" name="type" value="New">New <input type="radio" name="type" value="Refill">Refill
      <br>
      <br>
      Quantity:
      <br>
      <input type="number" min="0" name="quantity">
      <br>
      <br>
      <br>
    </div>
    <input type="button" id="btnAdd" value="+"> <input type="button" id="btnDel" value="-"> 
  </fieldset>  
  <center><input type="submit" value="Submit"></center>
</form>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32669496

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档