Javascript selectElement.value不工作

我正在尝试开发一个使用HTML、CSS、JavaScript和jQuery解决RubikCube的系统

您可以在以下网址查看：

以下功能中存在问题：

function processFile(e) {
    var selects;
    var file = e.target.result,
    results;
    if (file && file.length) {
        var i, j, lines = file.split("\n");
        selects = document.getElementById("main").getElementsByTagName("select");
        for (i = 0; i < 6; i++) {
            for (j = 0; j < 9; j++) {
                selects[i*9+j].value = lines[i].split(" ")[j];
            }
        }
    }
}

到

然后它工作正常，但我需要更改值，而不是背景色

以下是选择元素之一：

<select class="cell 00">
    <option class="colorOption" value="white" title="white" style="background-color: white;"></option>
    <option class="colorOption" value="red" title="red" style="background-color: red;"></option>
    <option class="colorOption" value="blue" title="blue" style="background-color: blue;"></option>
    <option class="colorOption" value="orange" title="orange" style="background-color: orange;"></option>
    <option class="colorOption" value="green" title="green" style="background-color: green;"></option>
    <option class="colorOption" value="yellow" title="yellow" style="background-color: yellow;"></option>
</select>

提前谢谢

更新：问题现已解决

我只需要触发更改（除了中间的select:j！=4） 通过添加以下行：

if (j != 4) {
    $(selects[i*9+j]).trigger('change');
}

因此，更改后的js函数如下所示：

function processFile(e) {
    var selects;
    var file = e.target.result,
        results;
    if (file && file.length) {
        var i, j, lines = file.split("\n"), colors;
        selects = document.getElementById("main").getElementsByTagName("select");
        for (i = 0; i < 6; i++) {
            for (j = 0; j < 9; j++) {
                selects[i*9+j].value = lines[i].split(" ")[j];
                if (j != 4) {                            //added this lines
                    $(selects[i*9+j]).trigger('change'); //added this lines
                }                                        //added this lines
            }
        }
    }
}

函数处理文件（e）{
var选择；
var file=e.target.result，
结果；
if（file&&file.length）{
变量i，j，line=file.split（“\n”），颜色；
selects=document.getElementById（“主”）.getElementsByTagName（“选择”）；
对于（i=0；i<6；i++）{
对于（j=0；j<9；j++）{
选择[i*9+j]。值=行[i]。拆分（“”[j]；
如果（j！=4）{//添加了这行
$（选择[i*9+j]）.trigger（'change'）；//添加了以下行
}//添加了这行
}
}
}
}

---

谢谢大家

这段代码不错。但有一个问题——您将jQuery与JS混合在一起，因此——您可能希望select在设置值后的行为与单击选项后的行为相同。这不会发生，因为是JQ“更改”侦听器更改了选择颜色。 所以，我们有两种方法——在循环中设置背景颜色和值（它是完全有效的，可能不是完全干燥的），或者用变化的值进行完整的JQ，让“变化”侦听器完成它的工作。第二种方法可以如下所示：

函数处理文件（e）{
var选择；
var file=e.target.result，
结果；
if（file&&file.length）{
变量i，j，line=file.split（“\n”），颜色；
selects=document.getElementById（“主”）.getElementsByTagName（“选择”）；
对于（i=0；i<6；i++）{
对于（j=0；j<9；j++）{
console.log（'cc'，选择[i*9+j]，选择[i*9+j]。值，行[i]。拆分（“”[j]）
var newVal=行[i]。拆分（“”[j]
var opt=选择[i*9+j]。查询选择器（'[title=“'+newVal+']”）；
如果（选择）{
$（选择[i*9+j]）.val（行[i].split（“”[j]））
$（选择[i*9+j]）。触发器（'change'）；
}
否则{
选择[i*9+j]。值=newVal
选择[i*9+j].style.backgroundColor=newVal
}
}
}
}
}

---

您可以看到，有一个catch-middle select没有选项，所以除了手动设置之外，没有其他操作。

jquery为哪个部分创建了select元素和选项？通过jquery创建了select元素和选项，请选中：

.getElementById（“main”）.getElementsByTagName（“select”）？？？你没有收到错误吗？如果是这样的话，它们是什么？没有错误，因为style.backgroundColor工作正常我知道中间选择，如果没有匹配的值，它应该选择一个空白值，这对我来说不会产生任何问题，非常感谢你的回答和帮助，金线是：“$（选择[i*9+j]）。触发器（'change'）；”；它给了我预期的结果，所以我还需要检查一件事，如果（j！=4），那么只有我应该触发，否则它不工作，这就是我所说的，这就是为什么我在代码中检查“opt”-用j=4:）处理这个中间选择，但要注意它的值，正如我看到的，空选择的设置值可能根本不起作用（只有backgroundColor对它们起作用）。所以，我会考虑只放置1个选项-带有给定颜色的选项：OK，但是设置值也是有效的，选择一个空白值，不工作的是触发器。
lines = "yellow white white white red white white white white white white white white blue white white white white white white white white orange white white white white white white white white green white white white white white white white white white white green white white orange white white white yellow white white white white ";

if (j != 4) {
    $(selects[i*9+j]).trigger('change');
}

function processFile(e) {
    var selects;
    var file = e.target.result,
        results;
    if (file && file.length) {
        var i, j, lines = file.split("\n"), colors;
        selects = document.getElementById("main").getElementsByTagName("select");
        for (i = 0; i < 6; i++) {
            for (j = 0; j < 9; j++) {
                selects[i*9+j].value = lines[i].split(" ")[j];
                if (j != 4) {                            //added this lines
                    $(selects[i*9+j]).trigger('change'); //added this lines
                }                                        //added this lines
            }
        }
    }
}

function processFile(e) {
    var selects;
    var file = e.target.result,
        results;
    if (file && file.length) {
        var i, j, lines = file.split("\n"), colors;
        selects = document.getElementById("main").getElementsByTagName("select");
        for (i = 0; i < 6; i++) {
            for (j = 0; j < 9; j++) {
        console.log('cc',selects[i*9+j],selects[i*9+j].value,lines[i].split(" ")[j])
        var newVal = lines[i].split(" ")[j]
                var opt = selects[i*9+j].querySelector('[title="'+newVal+'"]');
        if (opt) {
          $(selects[i*9+j]).val(lines[i].split(" ")[j])
            $(selects[i*9+j]).trigger('change');
        }
        else {
            selects[i*9+j].value = newVal
          selects[i*9+j].style.backgroundColor = newVal
        }
            }
        }
    }
}