動的に追加されたオプションに選択値を変更すると、値= ""が発生する

Question

プログラムで変更できないselectがあります。一つだけoptionとselect開始：

初期HTML：

<select id="clients" name="client"> 
    <option>Existing Clients...</option> 
    </select> 

は、その後、私はクライアントを取得し、selectに追加：

：

getClients(); 

function getClients() { 
    $.get('ajax/get-clients.php') 
    .done(function(response) { 
     for (let client of JSON.parse(response)) { 
     addClientOption(client.id, client.company_name); 
     } 
    }) 
    .fail(function(response) { 
     console.log(response); 
    }); 
    } 

function addClientOption(id, name) { 
    let newOption = document.createElement('option'); 

    newOption.value = parseInt(id); 
    newOption.text = name; 
    document.getElementById('clients').appendChild(newOption); 
} 

を今ではいくつかのオプションを持っています

<select id="clients" name="client"> 
    <option>Existing Clients...</option> 
    <option value="6">Number1</option> 
    <option value="77">SecondROUND</option> 
    <option value="14">Whips Dat Llama</option> 
</select> 

私はその値を変更しようとしています：

console.log(document.getElementById('clients').value); // =>"Existing Clients..." 
document.getElementById('clients').value = 6;   // expecting "Number1" 
console.log(document.getElementById('clients').value); // =>"" 

// And the select still shows the "Existing Clients..." option. 

私はselectへoptionsをハードコーディングしようと、期待どおりに動作します。それらを動的に追加することが問題と思われます。私は回避策を考え出すことができますが、誰かがなぜこれが起こっているのか説明できますか？

Answer 1

を参照してください。 .valueに割り当てる前に応答を待たなければなりません。そうしないと、その値のオプションは存在しません。だから、getClientsコールバック関数で行う必要があります。

function getClients() { 
    $.get('ajax/get-clients.php') 
    .done(function(response) { 
     for (let client of JSON.parse(response)) { 
     addClientOption(client.id, client.company_name); 
     } 
     document.getElementById('clients').value = 6; 
    }) 
    .fail(function(response) { 
     console.log(response); 
    }); 
    } 

Answer 2

<select> -fieldの値を設定する必要はありませんが、選択するフィールドには、selectedという属性を割り当てる必要があります。

はあなたが非同期でAJAXを使用して、オプションをロードしているhere