jsコードは1つの変数（？）で動作します。

-3

私はjsの作業コードを持っています、それは選択されたオプションのための異なったdivを示します。jsコードは1つの変数（？）で動作します。

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript"> 
$(document).ready(function(){ 
$('#box1').hide(); 
$('#box2').hide(); 
$('#box3').hide(); 
$("#thechoices").change(function(){ 
$("#" + this.value).show().siblings().hide(); 
});  
$("#thechoices").change(); 
}); 
</script> 
</head> 
<body> 

<select id="thechoices"> 
<option value="box1">Box 1</option> 
<option value="box2">Box 2</option> 
<option value="box3">Box 3</option> 
</select> 

<!-- the DIVs --> 
<div id="boxes"> 
<div id="box1"><p>Box 1 stuff...</p></div> 
<div id="box2"><p>Box 2 stuff...</p></div> 
<div id="box3"><p>Box 3 stuff...</p></div> 
</div>  
</body> 
</html>

、私はJSの経験を持っていないので、私はそれが多くの「thechoices」のための1つのページに複数回動作させる方法がわからないしてください。これよりコピーペーストのようなものが、より適し：

<script type="text/javascript"> 
$(document).ready(function(){ 
$('#box1').hide(); 
$('#box2').hide(); 
$('#box3').hide(); 

$('#box4').hide(); 
$('#box5').hide(); 
$('#box6').hide(); 
$("#thechoices").change(function(){ 
$("#" + this.value).show().siblings().hide(); 
}); 
$("#thechoices2").change(function(){ 
$("#" + this.value).show().siblings().hide(); 
}); 

$("#thechoices").change(); 
}); 
$("#thechoices2").change(); 
}); 
</script> 
</head> 
<body> 

<select id="thechoices"> 
<option value="box1">Box 1</option> 
<option value="box2">Box 2</option> 
<option value="box3">Box 3</option> 
</select> 

<!-- the DIVs --> 
<div id="boxes"> 
<div id="box1"><p>Box 1 stuff...</p></div> 
<div id="box2"><p>Box 2 stuff...</p></div> 
<div id="box3"><p>Box 3 stuff...</p></div> 
</div> 

<select id="thechoices2"> 
<option value="box4">1</option> 
<option value="box5">2</option> 
<option value="box6">3</option> 
</select> 

<!-- the DIVs --> 
<div id="boxes"> 
<div id="box4"><p>1 stuff...</p></div> 
<div id="box5"><p>2 stuff...</p></div> 
<div id="box6"><p>3 stuff...</p></div> 
</div>

は、私はあなたが私を助けることができる知っている、簡単なことのようですが、私はこれを処理することはできません。 2つのセレクタだけでなく、同じ方法で2番目のコードを変更するにはどうすればよいですか？私は多くの人に必要です。私の2番目のコードのように同じセクションを貼り付けてコピーしたくないです。

出典

2012-03-20 jerry87

あなたの質問はありますか？ –

だから問題は何ですか？ –

私はちょうどthechoices1と大きなファイルを作成したくない... thechoices100、私はそれを動的にしたい。 – jerry87

コードを少し修正しました。これをチェックしてください：

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.boxes div').hide(); 

$(".thechoices").change(function(){ 
var id = $(this).attr("id").replace("thechoices_", ""); 
var value = parseInt($(this).val()); 
$("#boxes_" + id + " div:eq(" + (value -1) + ")").show().siblings().hide(); 
}); 

$(".thechoices").change(); 

}); 
</script> 

<select class="thechoices" id="thechoices_1"> 
<option value="1">Box 1</option> 
<option value="2">Box 2</option> 
<option value="3">Box 3</option> 
</select> 

<!-- the DIVs --> 
<div class="boxes" id="boxes_1"> 
<div><p>Box 1 stuff...</p></div> 
<div><p>Box 2 stuff...</p></div> 
<div><p>Box 3 stuff...</p></div> 
</div> 

<select class="thechoices" id="thechoices_2"> 
<option value="1">Box 1</option> 
<option value="2">Box 2</option> 
<option value="3">Box 3</option> 
</select> 

<!-- the DIVs --> 
<div class="boxes" id="boxes_2"> 
<div><p>Box 1 stuff...</p></div> 
<div><p>Box 2 stuff...</p></div> 
<div><p>Box 3 stuff...</p></div> 
</div>

出典

2012-03-20 17:12:43 safrazik

いいアイデアが、それはすべてのセレクタの下にすべての3つのボックスを示しています。私が選んだものは問題ではなく、何も変わっていません - 3つのオプションがまだ見えます。 – jerry87

構文エラーがあり、コードを変更しました。もう一度お試しください:) – safrazik

これでうまくいきます:)ありがとうございました！ – jerry87

これはどのselectタグ上で実行されます：

$("select").change(function(){ 
    $("#" + this.value).show().siblings().hide(); 
});

出典

2012-03-20 16:59:56 graphicdivine

はIDを繰り返すことは避け、その対応するボックスに対処するために、各選択メニューのための手段を提供します。 HTMLで

：class="boxn"へ

変更id="thechoices"

class="thechoices"

id="boxn"

て今すぐ次のjQueryを使用し<div class="boxWrapper">...</div>

にそれぞれ選択し、対応するボックスをラップ：

$(document).ready(function(){ 
    $(".thechoices").change(function(){ 
     $this = $(this); 
     $this.closest(".boxWrapper").find("." + $this.val()).show().siblings().hide(); 
    }).change(); 
});

$this.val()で、ブラウザの信頼性を高めるにはthis.valueを使用しないでください。

出典

2012-03-20 17:03:57

申し訳ありませんが動作しません、問題は、選択するdivが表示されますが、選択されたdivが表示されますが、最初の手順のみで、2番目のセレクタは3つのdivをすべて表示します。 – jerry87

申し訳ありませんが、私は複数の選択などについての（主な）ポイントを逃しました。それに応じて編集された回答。 –

まだありません - 一瞬.... –

jsコードは1つの変数（？）で動作します。

答えて

関連する問題