selectElement.value not working

Question

私は、HTML、CSS、JavaScript、jQueryを使ってrubik cubeを解くシステムを開発しようとしています。

あなたはでそれを見ることができます。問題は、以下の機能である 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].style.backgroundColor = lines[i].split(" ")[j]; 

に、我々は、以下の行を変更した場合

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

それは問題なく動作していますが、背景色ではなく値を変更する必要があります。ここで

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

ありがとう：ここ

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

はラインのサンプル値です！

更新：問題は解決されました。次の行追加して ：私はちょうど（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

いいコードです。しかし、1つの問題があります.jQueryとJSを混在させているので、値を設定した後も同じように動作することを期待している可能性があります。それは選択色を変更しているJQの "変更"リスナーのように起こることはありません。 したがって、backgroundColor &の両方の値をループ内に設定する（完全に有効、おそらく完全にDRYしない）か、値を変更して完全なJQを実行し、 "変更"リスナーにその作業を行わせる2つの方法があります。第二のアプローチは、次のようになります。あなたが見ることができる 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 
     } 
      } 
     } 
    } 
} 

S、お互いのキャッチがあります - 中央の選択手でこれを行うが、設定するために他に何もないので、選択肢を持っていません。