1

選択ボックスでページの別の部分のCSSを動的に変更して、各選択に応じて適切なオプションが表示されるようにします。

たとえば、相関する選択オプションを選択すると、右側のDIV要素が表示されます。

私の選択した入力とDIV：

<select id="chooser" class="input_select" name="chooser">
<option value="">Select...</option>
<option value="Car">Car</option>
<option value="House">House</option>
<option value="Commercial">Commercial</option>
<option value="Other">Other</option>
</select>

<div id="car" style="display:none;">Cars</div>
<div id="house" style="display:none;">House related</div>
<div id="commercial" style="display:none;">Commercial stuff</div>
<div id="other" style="display:none;">Other stuff</div>

これまでの私のjquery：

$(document).ready(function() {

$('#chooser').change{
  $('#house').hide()
  $('#commercial').hide()
  $('#other').hide()
  $('#car').show()
}
});

私はjQueryの初心者ですが、どのオプションが選択されているかでフィルタリングするように指示する方法がわかりません。つまり、.change {}の部分を正しく追加したと思いますが、それをフィルタリングする方法がわかりません。

どんな助けでも大歓迎です。ありがとう

4

3 に答える 3

1

コードに構文エラーがあります。changeイベントの関数を渡す必要があります。次のことを試してください。

$(document).ready(function() {
   $('#chooser').change(function(){
      var w = this.value.toLowerCase();
      $('div').hide().filter('#'+w).show();
   })
});

http://jsfiddle.net/ss5G9/

確かに、ページ上のすべてのdiv要素を非表示にすることはお勧めできません。代わりに、div要素にクラスを追加し、それらの特定のdiv要素を非表示にすることができます。

<div id="car" class='div' style="display:none;">Cars</div>
<div id="house" class='div' style="display:none;">House related</div>
<div id="commercial" class='div' style="display:none;">Commercial stuff</div>
<div id="other" class='div' style="display:none;">Other stuff</div>


$(document).ready(function() {
   $('#chooser').change(function(){
      var w = this.value.toLowerCase();
      $('.div').hide().filter('#'+w).show();
   }).change()
});
于 2012-10-26T00:31:44.613 に答える
1

これを試して

$(function() {
    $('#chooser').on('change', function() {
        $('div').hide();
        var val = $(this).find('option:selected').val();
        if (val != '') {
            $('#' + val.toLowerCase()).show();
        }
    }).change();
});​

このフィドルを試してみてください

于 2012-10-26T00:32:33.443 に答える
1

$('#chooser').val()選択した値が表示されます。次に、if-elseまたはを使用しますswitch。

于 2012-10-26T00:29:06.173 に答える