-1

私は自分の要件のために多くのことをグーグルで調べています。だから私はこの質問を投稿しています。私の要件は、ユーザーが表示される div の値に基づいてドロップダウンから値を選択するときです。ただし、デフォルトでは、値を持つすべての div が表示されます。

ここに私のコードがあります:

<select name="lab_1" id="title" >
  <option value="All" onclick="showAll();" >All</option>
  <option value="one" onclick="showOther();">One</option>
  <option value="two" onclick="showOther();">Two</option>    
</select>
<div id="All" >
  hiihdhfhdf
  <div id="otherTitle" style="display:none;" >
    select
  </div>
  <div id="otherTitle2" style="display:none;" >
    ramsai
  </div>
</div>

<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script>
$(function() {
$('#title').change(function() {
    var all= $("#All").val();
    alert('hi');
    if(all==""){
        $("#otherTitle").show();
        $("#otherTitle2").show();
      }
      else if (this.value == "one") {
        $("#otherTitle").show();
        $("#otherTitle2").hide();
      }
      else if (this.value=="two"){
        $("#otherTitle2").show();
        $("#otherTitle").hide();
      }     
    });
    });


</script>
</body>

上記のコードでは、すべての div をクリックすると表示されませんが、1 つまたは 2 つのオプションに移動すると、すべての値が表示されます。私は42個のdivを持っています。jqueryのこれらすべてのdivに対する他の解決策はありますか、または以下で言及されているのはそのための唯一の解決策です

前もって感謝します

ラムサイ

4

3 に答える 3

1

ここで答えてください: http://jsfiddle.net/Hxadj/

コードには、そこにある必要のない余分なものがいくつかありました。また、All の値をテストしていました。理由はわかりませんが、(this.value == X) で行われた選択の値が必要でした。

$(function() {
$('#title').change(function() {
if(this.value == "All"){
    $("#All").show();        
    $("#otherTitle").show();
    $("#otherTitle2").show();
  }
  else if (this.value == "one") {
    $("#All").hide();          
    $("#otherTitle").show();
    $("#otherTitle2").hide();
  }
  else if (this.value=="two"){
    $("#All").hide();          
    $("#otherTitle2").show();
    $("#otherTitle").hide();
  }     
});
});

アップデート

リンクはこちら: http://jsfiddle.net/Hxadj/1/

HTML:

<select name="lab_1" id="title" >
<option value="All">All</option>
<option value="otherTitle">One</option>
<option value="otherTitle2">Two</option>
</select>

<div id="All" class="togglers">hiihdhfhdf</div>
<div id="otherTitle" class="togglers">select</div>
<div id="otherTitle2" class="togglers">ramsai</div>

JS

    $(function() {
    $('#title').change(function() {
    var divName = this.value;
    if(this.value == "All"){    
        $(".togglers").show();
    }else{      
        $(".togglers").hide();
        $("#"+divName).show();           
      }     
    });
});

これでうまくいくはずです。基本的に、選択オプションの値は div ID に対応している必要があります。次に、それぞれの show() または hide() ルールに入ってハードコーディングする必要はありません。

于 2012-07-18T12:52:19.983 に答える
1 
<select name="lab_1" id="title" >
<option value="All" onclick="show(this.value);" >All</option>
<option value="one" onclick="show(this.value);" >One</option>
<option value="two" onclick="show(this.value);" >Two</option>
</select>

JavaScript は次のようになります。

<script>
function show(val){

  if(val=="All"){

     document.getElementById("otherTitle").style.visibility="";
     document.getElementById("otherTitle2").style.visibility="";

 }elseif(val=="one"){

     document.getElementById("otherTitle").style.visibility="";
     document.getElementById("otherTitle2").style.visibility="collapse";

 }elseif(val=="two"){

   document.getElementById("otherTitle").style.visibility="collapse";
   document.getElementById("otherTitle2").style.visibility="";
 }
}
</script>
于 2012-07-18T12:51:00.887 に答える
0

またはもう一度：

$('#title').change(function() {
    var id = $(this).val();
    $('#otherTitle, #otherTitle2').not('#'+id).hide();
    $('#'+id).children().show();         
 });

フィドル

于 2012-07-18T12:55:00.153 に答える