selectElement.value無法正常工作

Question

我正在嘗試開發一個使用HTML，CSS，JavaScript，jQuery解決rubik多維數據集的系統。 rubik fiddle

的問題是在下面的功能：

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]; 
      } 
     } 
    } 
} 

如果我們改變了下面這一行

selects[i*9+j].value = lines[i].split(" ")[j]; 

到

selects[i*9+j].style.backgroundColor = 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> 

這裏是線的採樣值：預先

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 "; 

謝謝！

更新：現在問題已解決。

我不得不觸發這種改變（除了中間的選擇：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 
      } 
     } 
    } 
} 

謝謝大家！

Answer 1

不錯的一段代碼。但是有一個問題 - 您將jQuery與JS混合，因此 - 您可能希望select在設置值後表現相同，因爲它在舔選項後表現得很好。這不會發生，因爲它是改變選擇顏色的JQ「變化」聽衆。因此，我們有2種方法 - 在循環中設置backgroundColor &值（這是完全有效的，可能不是完全DRY），或者通過改變值來完整的JQ，並讓「更改」偵聽器完成其工作。第二種方法看起來是這樣的： enter link description here

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 
     } 
      } 
     } 
    } 
} 

是你可以看到，有彼此追趕 - 中間選擇沒有選擇，所以沒有什麼事情可做，但手工設置這個。