2016-11-21 16 views
0

3つの項目が選択されているかどうかを確認します。私は、オプションの2リストは、私が「基準」のIdオプションが唯一の3個のオプションのリンゴ、オレンジ、バナナのいずれかが選択されていない場合は読ませたい本JavaScriptでオプションが選択されているかどうかを確認する方法

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

ようになります持っています。クラス「果物」の複数のオプションを選択できます。リンゴやハロー、ハローやバイ、リンゴとバナナを選ぶことができます。

可能なロジックは何か。私はリンゴ、オレンジ、バナナのようなキーを持つオブジェクトを維持するようなアプローチはほとんどありませんでした。値はクリック数であり、カウントが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> 

オプションが再選択された場合、再び任意のリンゴ、オレンジやバナナのを再表示されなければならないし、彼らが選択されていない場合は読み取り専用になる必要があります。 ロジックを提案してください。質問を投稿するのは初めてです。私がどこにでも間違いがあったら教えてください。私は将来自分自身を正すことができます。 はあなたが

答えて

0

あなたがテストされていない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 
} 
+0

?選択された天気のような要素の現在の状態を取得するには、とにかくありますか? – Neetigya

0

が、私は答えを見つけてみてくださいすることができます。 jQueryを使って私は現在の選択を取得して、現在の選択にリンゴ、オレンジまたはバナナが含まれているかどうかを確認できました。 ここには、JQuery APIドキュメントの適切な関数へのリンクがあります。私はこのコンテキストでgetComputedStyleを使用するにはどうすればよい

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

関連する問題