Pour saisir la valeur de la zone de texte en ajoutant dynamiquement une liste déroulante à l’aide de jquery ?

Salut,

Effectuez les étapes suivantes.

— Découvrez le texte de la zone de texte en utilisant jquery .. comme $(‘#txtBox’).text()

— Créez ensuite la balise HTML de la liste d’options. Vous devez créer une fonction jquery commune qui prend la valeur de la zone de texte et créera l’élément suivant. Les valeurs déroulantes sont affichées sous forme de liste d’options. Vous pouvez donc créer une balise html comme suit.

DisplayTextBoxValue

Assurez-vous que la balise déroulante s’affiche pour les valeurs à l’aide des outils de développement du navigateur. Cela dépend de ce changement au-dessus de la balise.

— Après avoir créé cet élément, vous devez simplement l’ajouter à la liste d’options DropDown à l’aide de jquery.

— SDK

<script type="text/javascript">
        var controlIdCounter = 1;
        function AddMoreVariant(controlIdCounter) {
            if (controlIdCounter === undefined || controlIdCounter === null) {
                //                controlIdCounter = 1; 
                var sapCode = $("#txtSAPCODE").val();
                var Variant_UnitID = $("#<%= ddlvariantUnit.ClientID %> option:selected").val();
                var Variant_Unit_Name = $("#<%= ddlvariantUnit.ClientID %> option:selected").text();
                var Variant_SizeID = $("#<%= ddlvariant_weight.ClientID %> option:selected").val();
                var Variant_Weight = $("#<%= ddlvariant_weight.ClientID %> option:selected").text();
                var Variant_MRP = $("#<%= VariantMRP.ClientID %>").val();
                var Variant_SellingPrice = $("#<%= variantSelling_Price.ClientID %>").val();
            }
            else {
                var sapCode = $("#txtSAPCODE").val();
                var Variant_UnitID = $("#ddlvariantUnit" + controlIdCounter + " option:selected").val();
                var Variant_Unit_Name = $("#ddlvariantUnit" + controlIdCounter + " option:selected").text();
                var Variant_SizeID = $("#ddlvariant_weight" + controlIdCounter + " option:selected").val();
                var Variant_Weight = $("#ddlvariant_weight" + controlIdCounter + " option:selected").text();
                var Variant_MRP = $("#VariantMRP" + controlIdCounter).val();
                var Variant_SellingPrice = $("#variantSelling_Price" + controlIdCounter).val();
            }
            if (sapCode !== "" && Variant_UnitID !== "" && Variant_SizeID !== "" && Variant_MRP !== "" && Variant_SellingPrice !== "") {
                var data = {
                    sapCode: sapCode,
                    Variant_UnitID: Variant_UnitID,
                    Variant_Unit_Name: Variant_Unit_Name,
                    Variant_SizeID: Variant_SizeID,
                    Variant_Weight: Variant_Weight,
                    Variant_MRP: Variant_MRP,
                    Variant_SellingPrice: Variant_SellingPrice
                };

                $.ajax({
                    type: "POST",
                    url: "AddNewProduct.aspx/AddMoreVariant",
                    data: JSON.stringify({ variant: data }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response.d === "Success") {
                            console.log("Data has been inserted");
                            $("#checkbox" + controlIdCounter).removeAttr("style").prop("checked", true).prop("disabled", true).css({
                                "width": "48px",
                                "height": "37px"
                            });
                            $("#checkbox").removeAttr("style").prop("checked", true).prop("disabled", true).css({
                                "width": "48px",
                                "height": "37px"
                            });
                            //$("#checkbox" + controlIdCounter).show().prop('checked', true);
                        } else if (response.d === "Fail") {
                            Swal.fire('Error', 'This variant is already available!', 'error');
                        } else {
                            Swal.fire('Error', 'Failed to insert data. Please try again.', 'error');
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Error inserting data: " + error);
                    }
                });
            } else {
                Swal.fire('Error', 'Please fill in all fields for this variant.', 'error');
            }
        }
        //Insert Functionality into DB row wise
        function AppendVariant() {
            if ($("#txtSAPCODE").val() === "") {
                Swal.fire('Error', 'Please fill SapCode!', 'error');
                return false;
            }
            var sapCode = $("#txtSAPCODE").val().trim();
            var VUnit = $("#ddlvariantUnit option:selected").val().trim();
            var Vweight = $("#ddlvariant_weight option:selected").val().trim();
            var VMrp = parseFloat($("#VariantMRP").val().trim());
            var VsellingPrice = parseFloat($("#variantSelling_Price").val().trim());
            if (sapCode.length !== 7) {
                Swal.fire('Error', 'SAP Code should be exactly 7 digits!', 'error');
                return false;
            }
            if (VUnit === "" && Vweight === "" && VMrp === "" && VsellingPrice === "") {
                Swal.fire('Error', 'Please fill in all variant fields before appending more variants!', 'error');
                return false;
            }
            if (isNaN(VsellingPrice) || isNaN(VMrp)) {
                Swal.fire('Error', 'Please enter valid numeric values for Selling Price and MRP!', 'error');
                return false;
            }

            if (VsellingPrice > VMrp) {
                Swal.fire('Error', 'Selling Price should not be greater than MRP!', 'error');
                return false;
            }

            if (parseFloat($("#variantSelling_Price").val()) > parseFloat($("#VariantMRP").val())) {
                Swal.fire('Error', 'Selling Price should not be greater than MRP!', 'error');
                return false;
            }

            var newRow = $("<tr>");
            newRow.append("<td>Unit</td>");
            newRow.append('<td><select class="form-control arrows AppendddlvariantUnit" id="ddlvariantUnit' + controlIdCounter + '" style="width: 150px; top: 0px; left: 0px;"></select></td>');
            newRow.append("<td>Weight</td>");
            newRow.append('<td style="padding-left: 60px;"><select class="form-control arrows Appendddlvariant_weight" id="ddlvariant_weight' + controlIdCounter + '" style="width: 150px;"></select></td>');
            newRow.append("<td>MRP</td>");
            newRow.append('<td><input type="text" class="form-control" id="VariantMRP' + controlIdCounter + '" style="width: 150px;" onkeypress="return ValidateCharector(event)"></td>');
            newRow.append("<td>Selling Price</td>");
            newRow.append('<td style="padding-left: 25px;"><input type="text" class="form-control" id="variantSelling_Price' + controlIdCounter + '" style="width: 150px;" onblur="ValidatePrice();" onkeypress="return ValidateCharector(event)"></td>');
            newRow.append('<td><input type="button" value="Save" class="AddButton" onclick="AddMoreVariant(' + controlIdCounter + ');" /></td>');
            newRow.append('<td><input type="button" value="Remove" id="Remove" class="Reset" onclick="RemoveVariantfromDb(' + controlIdCounter + ');" /></td>');
            //newRow.append('<td><input type="button" value="Remove" class="Reset" onclick="RemoveVariantfromDb(' + controlIdCounter + ');" /></td>');
            newRow.append('<td><input type="checkbox" id="checkbox' + controlIdCounter + '" style="display: none; width:30px"  /></td>');
            //            newRow.append('<td><input type="button" value="Remove" id="Remove" class="Reset" onclick="removeRowVariant(this);RemoveVariantfromDb(' + controlIdCounter + ');" /></td>');
            $("#tableBody").append(newRow);
            if (parseFloat($("#variantSelling_Price" + controlIdCounter).val()) > parseFloat($("#VariantMRP" + controlIdCounter).val())) {
                Swal.fire('Error', 'Selling Price should not be greater than MRP!', 'error');
                return false;
            }
            if ($("#ddlvariantUnit" + controlIdCounter).val() === "" &&
           $("#ddlvariant_weight" + controlIdCounter).val() === "" &&
           $("#VariantMRP" + controlIdCounter).val() === "" &&
           $("#variantSelling_Price" + controlIdCounter).val() === "") {
                Swal.fire('Error', 'Please fill in all variant fields before appending more variants!', 'error');
                return false;
            }
           


            // AJAX call to fetch dropdown data
            $.ajax({
                url: 'AddNewProduct.aspx/GetDropdownData',
                method: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    var dropdownData = data.d;
                    var unitDropdown = $("#ddlvariantUnit" + controlIdCounter);
                    $.each(dropdownData.units, function (index, item) {
                        unitDropdown.append($('<option>', {
                            value: item.UnitID1,
                            text: item.UnitName1
                        }));
                    });

                    var weightDropdown = $("#ddlvariant_weight" + controlIdCounter);

                    // Function to populate weights based on the selected unit
                    function populateWeights(unitId) {
                        $.ajax({
                            type: "POST",
                            url: "AddNewProduct.aspx/GetWeightsByUnitId",
                            data: JSON.stringify({ unitId: unitId }),
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (response) {
                                // Clear existing options
                                weightDropdown.empty();
                                // Populate weight dropdown with the fetched weights
                                $.each(response.d, function (index, item) {
                                    weightDropdown.append($('<option>', {
                                        value: item.SizeID,
                                        text: item.Wiegit
                                    }));
                                });
                            },
                            error: function () {
                                alert('Failed to fetch dropdown data!');
                            }
                        });
                    }

                    unitDropdown.change(function () {
                        // Get the selected unit ID
                        var unitId = $(this).val();
                        // Populate weights based on the selected unit
                        populateWeights(unitId);
                    });

                    controlIdCounter++;
                },
                error: function () {
                    alert('Failed to fetch dropdown data!');
                }
            });
        }

        //Remove
               function RemoveVariantfromDb(controlIdCounter) {
            var confirmation = confirm("Are you sure you want to remove this Variant?");
            if (!confirmation) {
                return;
            }

            var sapCode = $("#txtSAPCODE").val();
            var variantId, Weight, MRP, sellingPrice;

            // Check controlIdCounter to determine where to get values from
            if (controlIdCounter === undefined || controlIdCounter === null) {
                variantId = parseInt($("#<%= ddlvariantUnit.ClientID %> option:selected").val());
                Weight = parseInt($("#<%= ddlvariant_weight.ClientID %> option:selected").val());
                MRP = parseFloat($("#<%= ddlvariant_weight.ClientID %> option:selected").val());
                sellingPrice = parseFloat($("#<%= ddlvariant_weight.ClientID %> option:selected").val());
            } else {
                variantId = parseInt($("#ddlvariantUnit" + controlIdCounter).val());
                Weight = parseInt($("#ddlvariant_weight" + controlIdCounter).val());
                MRP = parseFloat($("#VariantMRP" + controlIdCounter).val());
                sellingPrice = parseFloat($("#variantSelling_Price" + controlIdCounter).val());
            }

            // Check if all variants values are available
            if (sapCode && !isNaN(variantId) && !isNaN(Weight) && !isNaN(MRP) && !isNaN(sellingPrice)) {
                $.ajax({
                    type: "POST",
                    url: "AddNewProduct.aspx/RemoveVariantFromDB",
                    data: JSON.stringify({
                        sapcode: sapCode,
                        variantId: variantId,
                        Weight: Weight,
                        MRP: MRP,
                        sellingPrice: sellingPrice
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        debugger;
                        if (response.d === "Success") {
                            $("#checkbox" + controlIdCounter).hide();
                            $("#tableBody").find("tr[data-controlid='" + controlIdCounter + "']").remove();
                            console.log("Data has been removed" + controlIdCounter);
                        }
                        else {
                            $("#checkbox" + controlIdCounter).hide();
                            $("#tableBody" + controlIdCounter).remove();
                            $("#tableBody").find("tr[data-controlid='" + controlIdCounter + "']").remove();
                            //$("#tableBody" + controlIdCounter).remove();
                            console.log("Data Not Inserted" + controlIdCounter);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Error removing data: " + error);
                    }
                });
            } else {
                console.error("Variant data is incomplete or not found");
            }
        }
        
    </script>