を設定ドロップダウンJavascriptを使用して別のドロップダウンで選択されているものに基づいて値、およびその逆

Question

私はその答え

Set dropdown value based on what is selected in another dropdown using Javascript

を見て、私はあまりにも一方を作りたいです。選択ID = bの要素にid =、例に選択をリセットすると選択

は、「別のオプション1」とid =セットに「---」

がなぜ機能していないを選択しますか？

HTML：

<select id="a" onchange="changedrop();"> 
    <option value="1">---</option> 
    <option value="2">option 1</option> 
    <option value="3">option 2</option> 
    <option value="4">option 3</option> 
</select> 
<select id="b" onchange="changedrop();">> 
    <option value="1">---</option> 
    <option value="2">another option 1</option> 
    <option value="3">another option 2</option> 
</select> 

JS：

function changedrop() { 
    if (document.getElementById('a').value == '1') 
    document.getElementById("b").value = '1'; 
    else if (document.getElementById('a').value == '2') 
    document.getElementById("b").value = '1'; 
    else if (document.getElementById('a').value == '3') 
    document.getElementById("b").value = '1'; 
    else if (document.getElementById('a').value == '4') 
    document.getElementById("b").value = '1'; 
    else if (document.getElementById('b').value == '1') 
    document.getElementById("a").value = '1'; 
    else if (document.getElementById('b').value == '2') 
    document.getElementById("a").value = '1'; 
    else if (document.getElementById('b').value == '3') 
    document.getElementById("a").value = '1'; 
}; 

Answer 1

問題はあなたが両方のselect要素のonchangeイベントに耳を傾ける必要があるということです。

function changeDropA() { 
 
    var a = document.getElementById('a'); 
 
    var b = document.getElementById("b"); 
 
    
 
    if (a.value == '1') 
 
    b.value = '1'; 
 
    else if (a.value == '2') 
 
    b.value = '1'; 
 
    else if (a.value == '3') 
 
    b.value = '1'; 
 
    else if (a.value == '4') 
 
    b.value = '1'; 
 
}; 
 

 
function changeDropB() { 
 
    var a = document.getElementById('a'); 
 
    var b = document.getElementById("b"); 
 

 
    if (b.value == '1') 
 
    a.value = '1'; 
 
    else if (b.value == '2') 
 
    a.value = '1'; 
 
    else if (b.value == '3') 
 
    a.value = '1'; 
 
} 
 

 
document.getElementById('a').addEventListener('change', changeDropA); 
 
document.getElementById('b').addEventListener('change', changeDropB);

<select id="a"> 
 
    <option value="1">---</option> 
 
    <option value="2">option 1</option> 
 
    <option value="3">option 2</option> 
 
    <option value="4">option 3</option> 
 
</select> 
 
<select id="b"> 
 
    <option value="1">---</option> 
 
    <option value="2">another option 1</option> 
 
    <option value="3">another option 2</option> 
 
</select>