使用for循环嵌入值

Embedding values using for loop

本文关键字:循环 for 使用      更新时间:2024-03-29

因为我有属性的增量值,所以我遵循这个方法,正如你所看到的,我对属性进行了硬编码,但我想将它们嵌入到循环中。。请告诉我该怎么做。。我无法做到这一点。。。非常感谢。我从一个json文件中获取下拉列表中的值,其中我有20个属性。。。当我点击下拉列表中的特定值时。。。与该值相关的属性显示在列表框中。。我的html

form name="myform" id="myForm">
    <select id="dropdown1"></select>
     <select id="listbox"></select>
    <!--  <input type="checkbox">-->
    <br>

     (document).ready(function() {
    $.ajax({
        url: "data.json",
        dataType: "json",
        success: function(obj) {
            var jsObject = obj;
            var usedNames = [];
            $('<option>', {
                text: 'Select your Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled'
            }).appendTo('#dropdown1');



            $.each(obj, function(key, value) {
                if (usedNames.indexOf(value.name) == -1) {
                    $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                    usedNames.push(value.name);
                }
                /*  $('<option>', {
                    text: 'Select your Option',
                    value: '',
                    selected: 'selected',
                    disabled: 'disabled'
                }).appendTo('#dropdown1');
                */
                $.each(usedNames, function(index, value) {
                    $('<option>', {
                        text: value['name'],
                        value: index
                    }).appendTo('#dropdown1');
                });
            /*    $('<option>', {
                    text: 'Select your List Option',
                    value: '',
                    selected: 'selected',
                    disabled: 'disabled'
                }).appendTo('#listbox'); */

                $('#dropdown1').change(function() {
                    $('#listbox').empty();
                    $('<option>', {
                      text: 'Select your List Option',
                        value: '',
                        selected: 'selected',
                        disabled: 'disabled'
                    }).appendTo('#listbox');
                    var selection = $('#dropdown1 :selected').text();
                    var selection = $('#dropdown1 :selected').text();
                    $.each(jsObject, function(index, value) {
                        if (value['name'] === selection) {
                            var optionHtml = '';
                            for (var i = 1; i <= 20; i++) {
                                var attr = 'attr' + ('000' + i).substr(-3);
                                optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';
                            }
                            $('#listbox').append(optionHtml);
                        }
                    });
                });
            });
        }
    });
});

您可以使用for循环来生成选项元素,因为所有属性都是增量的。试试这个:

var selection = $('#dropdown1 :selected').text();
$.each(jsObject, function(index, value) {
    if (value['name'] === selection) {
        var optionHtml = '';
        for (var i = 1; i <= 20; i++) {
             var attr = 'attr' + ('000' + i).substr(-3);
             optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';
        }
        $('#listbox').append(optionHtml);
    }
});

工作示例

请注意,这还将HTML构建为单个字符串,并将其附加到DOM中一次,以获得更好的性能。