个人中心
gpt4 book ai didi

javascript - 如何在克隆元素上应用事件？

转载 作者：行者123 更新时间：2023-12-03 08:51:04 25 4
gpt4 key购买 nike

有人可以帮我解决这个问题吗？

我正在尝试制作一个订购系统，一切都很顺利，但我们的顾问指出，我们需要让用户可以选择在一次交易中订购多个商品。这让我很困惑。我在 google 上搜索了很多有关 JQueries 和 JScripts 的信息，但最终还是走进了死胡同。

我现在拥有的是:

HTML(orderform.html):

<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并进行了一些修改。我有很多用于克隆的代码，但这是我设法使用当前表单进行操作的唯一代码。

 $(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) 我也是通过搜索得到的，但我忘记了哪个网站:

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>'也可以使用克隆表单。

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

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

请注意，我们只教授了基本的 HTML - 直到表单(如果我记得的话)、基本的 PHP、Java、C# 和 SQL。这是我第一次尝试编写 JScript 和 JQueries 代码，但我遇到了困难。

最佳答案

这是一个工作示例(我删除了大部分与问题无关的 HTML)。

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

然后只需将正确的元素传递给 onchange 中的 setOptions 即可:

<select name="product" onchange="setOptions(this)">

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

 var capacity = $(product).closest('div').find('select[name="capacity"]')[0];

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

关于javascript - 如何在克隆元素上应用事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32669496/

25 4 0
文章推荐： python - 迁移学习类型错误: 'module' object is not callable
文章推荐： android-ndk - 未使用的DT条目:类型为0x1d arg
文章推荐： bash - 避免在if bash时if语句引发错误的语句
文章推荐： wpf - C# WPF 在构建时创建了太多文化文件夹
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com