如何检查是否在 JavaScript 中选择了任何选项答案

【问题标题】：How to check if any of the options are selected in JavaScript如何检查是否在 JavaScript 中选择了任何选项
【发布时间】：2017-04-04 23:49:15
【问题描述】：

我将如何检查是否选择了三个项目中的任何一个。我有两个选项列表，如下所示：

  <div class="fruits">
        <select>
            <option>apple</option>
            <option>orange</option>
            <option>banana</option>
            <option>hello</option>
            <option>Bye</option>
        <select>
    </div>

   <div id="criteria">
        <select>
            <option>fruits</option>
            <option>in season</option>
            <option>expensive</option>
        </select>
    </div>

我想让“条件”ID 选项仅在未选择 apple、orange、banana 三个选项中的任何一个时为只读。可以选择“水果”类中的多个选项，例如用户可以选择苹果或你好、你好或再见、苹果和香蕉。

可能的逻辑是什么。我尝试过很少的方法，比如维护一个带有苹果、橙色和香蕉等键的对象，值是它们的点击次数，如果所有键的计数为 0，那么我会隐藏另一个选项标签。

我也尝试了其他方法。这个代码在这里：

<script>
    var count = 0; 
    fruitsList  = document.getElementsByClassName("fruits"); 
    var countObj = {
            apple: 0,
            orange:0,
            banana:0, 
        }   
    for(var i = 0; i<= fruitsList.length-1 ; i++ ){
        fruitsList[i].addEventListener("click", function(){
        \* have to grab the value of the elements because the list of elements is generated by PHP and there will be plenty of elements *\
    var threeOption = this.getAttribute("value");
             if(fourOption == 'apple' || fourOption == 'orange' || fourOption == 'banana'){
    if(this.selected == true){
                    countObj[fourOption]++;
                    }
                else if(this.selected == false){
                    countObj[fourOption]--;
                }
                else{
                    countObj[fourOption]--;
                }
            }
    for (var key in countObj) {
                if (Object.prototype.hasOwnProperty.call(countObj, key)) {
                    var val = countObj[key];
                    if(val>0){
                        count = 1; 
                    }
                }
            }
    if(count==1){
                for(var i = 0 ; i<=5 ; i++){
                    document.querySelectorAll("#criteria option")[i].removeAttribute("disabled");
                    }
                }
           else{
       for(var i = 0 ; i<=5 ; i++){
    document.querySelectorAll("#criteria option")[i].setAttribute("disabled","true");
        }
       }
     });
    }
</script>

如果再次选择苹果、橙子或香蕉中的任何一个，这些选项应该会重新出现，如果它们没有被选择，则应该变为只读。请提出一个逻辑。如果我在任何地方有错误，请告诉我，我很乐意在以后更正自己。

【问题讨论】：

标签： javascript html dom dom-events

【解决方案1】：

您可能需要使用getComputedStyle

未测试，但你可以试试这个

function setElement(){
// pass the element
window.onscroll = function(){scroll(element)};
}

function scroll(elem){
eHeight = window.getComputedStyle(elem,null).getPropertyValue("height");
        //Rest of the code
}

【讨论】：

如何在这种情况下使用 getComputedStyle？无论如何要获取元素的当前状态，例如是否选择了天气。

【解决方案2】：

我找到了答案。使用 jQuery 我能够获取当前选择，然后检查当前选择是否包含苹果、橙子或香蕉。这是 JQuery API 文档中相应函数的链接。

http://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/

【讨论】：