console.log($(this).....()[0] .innerHTML-有时会打印正确的值,有时会打印所有值

时间:2019-12-16 12:19:34

标签: javascript jquery html

我对此感到非常疯狂。当我以为以某种方式表明它“不这次...不”时,我就发疯了。

所以我的代码应该做的是,在表格中针对特定列中的每一行,基于另一列中的值创建下拉列表。我的下拉列表在每一行中都不相同。

为什么有问题...因为我必须从中检查值的其他列也是DDL,但已经选择了值。 (级联DDL )和,我不需要打开。(“ change”,功能),因为我确实这样做了。 我的问题是,当一个用户同时从两个DDL中选择并执行UPDATE表时,我希望他仍然能够更改选定的选项,这意味着两个DDL应该都在该位置。它适用于FIRST DDL,因为我只检查了:selected 值,其余的都正常添加了。但是我有第二个问题。这样做时:

console.log($tr.find("td:eq(16)").parents("tr").children("td:eq(15)")[0].innerHTML;)

..要找到第一个DDL的值,它要么返回正确的值,要么向我显示所有选择选项,然后我的代码无法正常工作-.-

这是我当前的代码:(第一部分是带有“ on.change”的代码,第二部分是有问题的代码。.但是我添加了完整代码,因此您也可以看到ajax调用)

//create dropdown for Type -they are dependent on the CI Values - also have ID_Number that will be saved for later use
var CI_JSON_File = [];
$.ajax({
    type:'GET',
    url:"{{url_for('CIType')}}",
    success:function(data){
        //parse JSON data in order to show it as JSON and not a String
        // then group it in order to gain access to each Subtype for each CI
        result = JSON.parse(data).reduce((acc,elm)=>{
        if ( acc[elm.CI] ) acc[elm.CI].push( { Type:elm.Type, TypeValue:elm.TypeValue } )
        else acc[elm.CI] = [{ Type:elm.Type, TypeValue:elm.TypeValue }]
        return acc
        },{})
        $.each(result, function(index, val){
            //get each array inside the JSON file, to gain access to CI Types 
            CI_JSON_File[index] = val;
        });,
        //code used to add DDL based on change in CI DDL
        $('#my_id').on('change', '#CISelect', function(event){
            var CIValue = $(this).val();
            var TypeSelect = ""; 
            var htmlOption = '<option value="0"> Select Type</option>';
            if(CIValue !== '0'){
                var typeCI = CI_JSON_File[CIValue];
                $.each(typeCI, function(key, value){
                    htmlOption += '<option value="' + value.TypeValue + '">' + value.Type + '</option>'; 
                });
            }
            TypeSelect = "<select value='CIType'>" + htmlOption + '</select>';
            $(this).parents('tr').children('td:eq(16)').empty().append(TypeSelect);
        });

        //this code is used to check if there is already a value in the selected box and if so to select it in the 
        //dropdown list, and show the Type and not only the TypeValue
        $(function(){

        console.log("ready");
        $('#my_id tr').each(function(){
            var optionType = "";
            var selectType = "";
            const $tr = $(this);
            var selectedType = $tr.find("td:eq(16)")[0];
            console.log(selectedType);
            if(selectedType){
                //get the CI value that vas selected before
                console.log(selectedType.innerHTML);
                var CIBefore =  $tr.find("td:eq(16)").parents("tr").children("td:eq(15)")[0].innerHTML;
                console.log(CIBefore);
                var typeCIBefore = CI_JSON_File[CIBefore];
                console.log(typeCIBefore);
                var typeCIBefore = CI_JSON_File[CIBefore];
                $.each(typeCIBefore, function(key, value){
                    if(selectedType === value.TypeValue){
                       optionType += '<option selected="selected" value="' + value.TypeValue + '">' + value.Type + '</option>';
                    }
                    else{
                        optionType += '<option value="' + value.TypeValue + '">' + value.Type + '</option>';
                    }
                });
                selectType = '<select class = "CITypeSelect">' + optionType + '</select>';
                $tr.find('td:eq(16)').empty().append(selectType);


            }
            //selectType =  "<select value='CIType'>" + optionType + '</select>';
            //$(this).parents('tr').children('td:eq(16)').empty().append(selectType);
        });
    })


    }
});

DDL的表来自ajax,称为JSON文件。但是以某种方式我无法获得正确的值。

我真的不知道我现在在做什么错了:(而且我仍在学习JS jquery ..所以任何帮助都会很棒。

0 个答案:

没有答案