Question

我有2个数组，数据形式为php，并使用选择选项菜单获取两个数组的当前键。
从选择菜单中选择键后，我将使用键显示两个阵列的键数据。如果第二个数组没有键，则应该不显示任何内容。
当两个数组具有相同的键时，它可以正常工作。
但是当第二个数组没有键时，它将显示以前的数据，而不显示任何内容。
php数组类似于：

$arrays['first']['*random_keys*'] = *random data*;
$arrays['second']['*random_keys*'] = *random data*;
$arrays['keys']['first'] = *list of keys*;

代码：

<select id="selector" name="selected_key" onchange="showContent();">
</select>
<div id="show_selected_option"></div>
<div id="showFirstArrayData"></div>
<div id="showSecondArrayData"></div>

<script>
//both arrays in 1 from php
const arrays = <?php echo json_encode($arrays); ?>;
//keys of first array
const keys_kaunt = <?php echo json_encode(count($arrays['keys']['first'])); ?>; 

var text = '<option></option>';
for(var i=0;i<keys_kaunt;i++)
{
    text += '<option>' + arrays['keys']['first'][i] + '</option>';
}
//show all options in select
document.getElementById("selector").innerHTML = text;

//show data
function showContent(){
    var e = document.getElementById("selector");
    var f = e.options[e.selectedIndex].value;    
    document.getElementById("show_selected_option").value = f;

    //first array data
    var firstArrayKeys = arrays['first'][f];
    var firstKeysOutput= '';
    Object.keys(firstArrayKeys).forEach(function (key){
        firstKeysOutput += key + arrays['first'][f][key];
    });

    document.getElementById("showFirstArrayData").innerHTML = firstKeysOutput;

    //second array data
    var secondArrayKeys = arrays['second'][f];
    var secondKeysOutput= '';
    Object.keys(secondArrayKeys ).forEach(function (key){
        secondKeysOutput += key + arrays['second'][f][key];
    });

    document.getElementById("showSecondArrayData").innerHTML = secondKeysOutput;

}
        </script>

解决方法是如何在更改的选择器上重置变量“ f”。因此，如果第二个数组没有所选键，则它不会显示先前选择的数据。

谢谢，现在工作。问题在于生成的innerHTML不会消失，也不在变量中。

Answer 1

如果我正确理解了您的问题，那么您可能需要一个if语句。
听起来好像您想在id="showSecondArrayData"不包含键arrays['second']时使用f清空输入。

function showContent(){
    var e = document.getElementById("selector");
    var f = e.options[e.selectedIndex].value;    
    document.getElementById("show_selected_option").value = f;

    // FIRST ARRAY code
    //

    //second array data
    if (f in arrays['second']){
        var secondArrayKeys = arrays['second'][f];
        var secondKeysOutput= '';
        Object.keys(secondArrayKeys ).forEach(function (key){
            secondKeysOutput += key + arrays['second'][f][key];
        });
        document.getElementById("showSecondArrayData").innerHTML = secondKeysOutput;
    } else {
        document.getElementById("showSecondArrayData").innerHTML = '';
    }

}

我不是js专家，所以请原谅任何错误或不遵守js编码标准。

Answer 2

function showContent(){
    document.getElementById("showSecondArrayData").innerHTML = '';
    var e = document.getElementById("selector");
    var f = e.options[e.selectedIndex].value;    
    document.getElementById("show_selected_option").value = f;
}

是把戏，请帮忙。

js在选择选项菜单中更改时重置变量

2 个答案: