如何通過ID獲得選項元素並輸出文字

有人可以幫助我用這個小小的JavaScript。只有當選擇了選項值2時，我纔想讓rersult在NA中顯示。我想11" ，以示將顯示。需要一個簡單的腳本，基於價值的文本輸出自定義文本。我知道我有值=‘2’列出兩次。我不能使用值字段。如何通過ID獲得選項元素並輸出文字

<select id="sizing-change" onchange="myFunction()"> 
    <option value="2">12"</option> 
    <option value="2" id="test">11"</option> 
</select> 

<div class="sizefinal"> 
    Suggested Size: <span id="finalsize">NA</span> 
</div> 

<script> 
function myFunction() {   
    if(document.getElementById("test").value == "11") { 
    document.getElementById("finalsize").innerHTML = "Size: 11"; 
    } 
} 
</script>

來源

2015-07-20 WebbySmart

你可以選中該選項的文字像

function myFunction() { 
 
    var el = document.getElementById("sizing-change"); 
 
    if (el.options[el.selectedIndex].text.trim() == '11"') { 
 
    document.getElementById("finalsize").innerHTML = "Size: 11"; 
 
    } else { 
 
    document.getElementById("finalsize").innerHTML = "NA"; 
 
    } 
 
}

<select id="sizing-change" onchange="myFunction()"> 
 
    <option value="2">12"</option> 
 
    <option value="2" id="test">11"</option> 
 
</select> 
 

 
<div class="sizefinal"> 
 
    Suggested Size: <span id="finalsize">NA</span> 
 
</div>

來源

2015-07-20 04:14:24

如果你可以改變的選項爲不同的值的value場（你應該），那麼你可以試試這個：

<select id="sizing-change" onchange="myFunction()"> 
    <option value="12">12</option> 
    <option value="11" id="test">11</option> 
</select> 
<div class="sizefinal">Suggested Size: <span id="finalsize">NA</span> 

</div> 
<script> 
    function myFunction() { 
     if (document.getElementById("sizing-change").value == 11) { 
      document.getElementById("finalsize").innerHTML = "Size: 11"; 
     } 
    } 
</script>

演示：http://jsfiddle.net/GCu2D/784/

來源

2015-07-20 04:16:19

var finalsize = document.querySelector('#finalsize'); 
 
var sizingChange = document.querySelector('#sizing-change') 
 
var testOption = sizingChange.querySelector('#test'); 
 

 
myFunction(sizingChange); 
 

 
function myFunction(element) { 
 
    var checked = element.querySelector(':checked'); 
 
    
 
    if (checked == testOption) { 
 
     finalsize.innerHTML = "Size: " + element.querySelector(':checked').text; 
 
    } else { 
 
     finalsize.innerHTML = 'NA'; 
 
    } 
 
}

<select id="sizing-change" onchange="myFunction(this)"> 
 
    <option value="2">12"</option> 
 
    <option value="2" id="test">11"</option> 
 
</select> 
 

 
<div class="sizefinal"> 
 
    Suggested Size: <span id="finalsize">NA</span> 
 
</div>

來源

2015-07-20 04:19:54 monkey

代碼只有答案都不是很大，你應該解釋在OP的代碼，爲什麼你的答案解決他們的問題。這段代碼相當扭曲，最初的* myFunction *調用應該限定使用load事件或者在元素之後。 * element.value *不應該等於'11'，因爲兩個選項都有一個值，既不是'11'，所以即使OP聲明「我不能使用該值」，也改變了值。 – RobG

我真的需要它做的是當選擇11時吐出單詞測試。我也不能改變11「，我在昨天晚上沒有想到我打了麻袋，這個答案只解決了一半的問題 – WebbySmart

固定：指定條件 – monkey

如何通過ID獲得選項元素並輸出文字

回答

相關問題