如何通过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获得选项元素并输出文字

回答

相关问题