Javascript console.log（$（this）…（）[0].innerHTML-有时打印正确的值有时打印所有值

我为这件事发疯了……就在我以为自己不知何故成功的时候，它告诉我“不，这次不是……”

因此，我的代码应该做的是，在一个表中，根据另一列的值，为特定列中的每一行创建下拉列表。-也就是说，我的下拉列表在每一行中都不相同

为什么会有问题…因为我必须检查值的另一列也是DDL，但是已经选择了值。（级联DDL）和否，我不需要打开。（'change'，函数），因为我已经这样做了。 我的问题是，当用户从两个DDL中选择并更新表时，我希望他仍然能够更改所选的选项，这意味着两个DDL都应该存在。这适用于第一个DDL，因为我只是检查：所选值和其余值是否正常添加。但第二个DDL有问题。执行此操作时：

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

..要找到第一个DDL的值，它要么返回正确的值，要么显示所有的选择选项，然后我的代码就无法完成剩余的任务--

这是我目前的代码：（第一部分是带有“on.change”的代码，第二部分是有问题的代码……但是我添加了整个代码，以便您也可以看到ajax调用）

//为类型创建下拉列表-它们取决于CI值-还具有将保存以供以后使用的ID\u编号
var CI_JSON_File=[]；
$.ajax({
类型：'GET'，
url:“{{url_for（'CIType'）}}”，
成功：功能（数据）{
//解析JSON数据以将其显示为JSON而不是字符串
//然后将其分组，以便访问每个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}]
返回acc
},{})
$.each（结果、函数（索引、val）{
//获取JSON文件中的每个数组，以访问CI类型
CI_JSON_文件[index]=val；
});,
//用于根据CI DDL中的更改添加DDL的代码
$（'my#u id'）。关于（'change'，'CISelect'，函数（事件）{
var CIValue=$（this.val（）；
var TypeSelect=“”；
var htmlOption='选择类型'；
如果（CIValue！==“0”）{
var typeCI=CI_JSON_文件[CIValue]；
$.each（类型CI、函数（键、值）{
htmlOption+=''+值。类型+''；
});
}
TypeSelect=“”+htmlOption+”；
$（this）.parents（'tr'）.children（'td:eq（16））.empty（）.append（TypeSelect）；
});
//此代码用于检查所选框中是否已有值，如果有，则在
//下拉列表，并显示类型，而不仅仅是类型值
$（函数（）{
控制台日志（“就绪”）；
$（'#my_id tr'）。每个（函数（）{
var optionType=“”；
var selectType=“”；
const$tr=$（此项）；
var-selectedType=$tr.find（“td:eq（16）”）[0]；
console.log（selectedType）；
如果（已选择类型）{
//获取vas之前选择的CI值
log（selectedType.innerHTML）；
var CIBefore=$tr.find（“td:eq（16）”）。父母（“tr”）。子女（“td:eq（15）”）[0]。innerHTML；
console.log（CIBefore）；
var typeCIBefore=CI_JSON_文件[CIBefore]；
控制台日志（类型cibefore）；
var typeCIBefore=CI_JSON_文件[CIBefore]；
$.each（类型、函数（键、值）{
if（selectedType==value.TypeValue）{
optionType+=''+值。Type+''；
}
否则{
optionType+=''+值。Type+''；
}
});
选择类型=“”+选项类型+“”；
$tr.find（'td:eq（16）'）.empty（）.append（selectType）；
}
//selectType=“”+optionType+”；
//$（this）.parents（'tr'）.children（'td:eq（16））.empty（）.append（selectType）；
});
})
}
});

DDL的表来自ajax，称为JSON文件。但不知何故，我无法获得正确的值

---

我真的不知道我做错了什么：（而且我还在学习JS jquery..所以任何帮助都会很好。

你应该使用

最近的（“tr”）

或者代替

。父母（“tr”）。孩子（“td:eq（15）”

你可以使用

prev（）

（对于第16个TD，上一个元素应该是第15个TD）。而不是

[0]。innerHTML

您可以使用方法

html（）

或更好的方法在DDL中选择值，您可以使用

.find（'select'）.val（）

。我尝试了所有这些，但每次都会更改：/…它返回未定义的值我建议您使用.siblines（）、next（）或prev（）jquery选择器，而不是先选择child，然后选择parent，然后选择child和soYou不应该使用

console.log

来检查变量（）。为了确保这一点，您可能需要更改

console.log（$tr.find（$td:eq（16）”）.parents（$tr.children（$td:eq（15）”）[0]。innerHTML；

到

var d=$tr.find（$tr.find（$td:eq（16）”）.parents（$tr”）.children”）.children（“td:eq（15）”）[0]。innerHTML；debugger；

然后检查

d

@vqf中的值。谢谢你的信息，我更正了我的代码。将所有的父项都更改了。childen…代码改为prev…接下来，它有时仍然显示我未定义…这可能与值是int而不是字符串有关吗？我真的为此发疯了

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


    }
});