如何通过id和输出文本获取选项元素

How to get options element by id and output text

本文关键字：获取 选项 元素 文本 输出 何通过 id      更新时间：2023-09-26

谁能帮我这个小javascript。我希望结果显示在NA只有当选项值2被选中。我想要11"显示将显示。需要一个简单的脚本来输出基于值文本的自定义文本。我知道我列出了两次value="2"。我不能使用值字段。

<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>

您可以检查选项的文本，如

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>

如果您可以将选项的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/

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>

相关文章：