'選擇'屬性的選項不重置裏面如果else語句

我想要使用if else語句將「selected」添加到選擇菜單中的選項。我唯一的問題是，我不知道爲什麼一旦我回到價值'頂部'選項[1]仍然'選擇'。這就像如果不執行條件的第一，雖然我看看我做的控制檯登錄它不改變爲第一，如果...'選擇'屬性的選項不重置裏面如果else語句

<select id='selectdesign'> 
    <option value="0"></option> 
    <option value="top">top</option> 
    <option value="jeans">jeans</option> 
</select> 


<select id='selectmenu'> 
    <option value="0"></option> 
    <option value="1">top-blue</option> 
    <option value="2">top-pink</option> 
    <option value="3">bottoms-red</option> 
    <option value="4">bottoms-violet</option> 
</select> 
function selectOption(element) { 
     if (element.value == 'top') { 
      console.log('if'); 
      option[2].setAttribute('selected', true); 
     } else if (element.value == 'jeans') { 
      console.log('else if'); 
      option[1].setAttribute('selected', true); 
     } 
    }

我就改變

呼籲selectDesign的selectOption功能

來源

2017-05-26 Alina Antemir

顯示你的HTML代碼也 – prasanth

哪裏'option'變量定義？請[編輯]問題以顯示所有相關代碼。在任何情況下，您都可以通過直接設置'.value'屬性來設置select元素的當前值，您不必爲設置單個選項元素的'selected''屬性而煩惱。 – nnnnnn

您需要訪問選擇元素的正確的價值，像

element.options[element.selectedIndex].value

，並使用

document.getElementById('selectmenu').selectedIndex = 1;

用於設置選項的索引。

function selectOption(element) { 
 
    if (element.options[element.selectedIndex].value == 'top') { 
 
     document.getElementById('selectmenu').selectedIndex = 1; 
 
    } else if (element.options[element.selectedIndex].value == 'jeans') { 
 
     document.getElementById('selectmenu').selectedIndex = 3; 
 
    } 
 
}

<select id="selectdesign" onchange="selectOption(this);"> 
 
    <option value="0"></option> 
 
    <option value="top">top</option> 
 
    <option value="jeans">jeans</option> 
 
</select> 
 
<select id="selectmenu"> 
 
    <option value="0"></option> 
 
    <option value="1">top-blue</option> 
 
    <option value="2">top-pink</option> 
 
    <option value="3">bottoms-red</option> 
 
    <option value="4">bottoms-violet</option> 
 
</select>

版本與預選選項的對象。

function selectOption(element) { 
 
    var indices = { 
 
      top: 1, 
 
      jeans: 3, 
 
     }, 
 
     value = element.options[element.selectedIndex].value 
 

 
    if (value in indices) { 
 
     document.getElementById('selectmenu').selectedIndex = indices[value]; 
 
    } 
 
}

<select id="selectdesign" onchange="selectOption(this);"> 
 
    <option value="0"></option> 
 
    <option value="top">top</option> 
 
    <option value="jeans">jeans</option> 
 
</select> 
 
<select id="selectmenu"> 
 
    <option value="0"></option> 
 
    <option value="1">top-blue</option> 
 
    <option value="2">top-pink</option> 
 
    <option value="3">bottoms-red</option> 
 
    <option value="4">bottoms-violet</option> 
 
</select>

來源

2017-05-26 08:53:07

非常感謝！這是我想要的。 –

'選擇'屬性的選項不重置裏面如果else語句

回答

相關問題