1

jquery スクリプトのヘルプが必要です。

私は2つのselect箱を持っています。最初のボックスから 1 つのオプションを選択するとselect、2 番目のボックスに使用可能なすべてのオプションから 3 つの項目が表示されます。スクリプトはそれを実行しますが、2 番目のボックスの上部に「追加の」値も表示しselectます。

誰かが理由を教えてもらえますか?

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

<select id="viewSelector" style="float: left;">
 <option value="0">-- Select a View --</option>       
 <option value="view1">W</option>
 <option value="view2">X</option>
 <option value="view3">Y</option>
 <option value="view4">Z</option>
</select>

<select id="viewSelect1">

 <option id="view1a">W1</option>
 <option id="view1b">W2</option> 
 <option id="view1c">W3</option>

 <option id="view2a">X1</option>
 <option id="view2b">X2</option> 
 <option id="view2c">X3</option>

 <option id="view3a">Y1</option>
 <option id="view3b">Y2</option> 
 <option id="view3c">Y3</option>

 <option id="view4a">Z1</option>
 <option id="view4b">Z2</option> 
 <option id="view4c">Z3</option>

</select>

ここに私のjQuery/JavaScriptがあります:

$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1a, #view1b, #view1c'),
    'view2' : $('#view2a, #view2b, #view2c'),
    'view3' : $('#view3a, #view3b, #view3c'),
    'view4' : $('#view4a, #view4b, #view4c'),
  };

  $.each($.viewMap, function() { this.hide(); });
    $('#viewSelect1').hide();

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
      $('#viewSelect1').hide();
    // show current
    $.viewMap[$(this).val()].show();
      $('#viewSelect1').show();
  });
});​

ここで見つけることができる実際の例: http://jsfiddle.net/amarcinkowski/Sg8Xf/9/

4

3 に答える 3

1

選択した値の ID を単純に取得し、属性 selected を追加します。

var id = $.viewMap[$(this).val()].attr("id");

$('#'+id).attr('selected', 'selected');

$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1a, #view1b, #view1c'),
    'view2' : $('#view2a, #view2b, #view2c'),
    'view3' : $('#view3a, #view3b, #view3c'),
   'view4' : $('#view4a, #view4b, #view4c'),
};

$.each($.viewMap, function() { this.hide(); });
$('#viewSelect1').hide();

$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
  $('#viewSelect1').hide();
// show current
$.viewMap[$(this).val()].show();
  $('#viewSelect1').show();
  var id = $.viewMap[$(this).val()].attr("id");

  $('#'+id).attr('selected', 'selected');
});
});
于 2012-07-30T14:09:03.490 に答える
0

ここで編集されたのは、動作中の jsFiddle の例です

追加した

<option id="view0">Select</option>

に

<select id="viewSelect1">
....
</select>

オブジェクトを変更しました

$.viewMap = {
    '0' : $([]),
    'view1' : $('#view1a, #view1b, #view1c'),
    'view2' : $('#view2a, #view2b, #view2c'),
    'view3' : $('#view3a, #view3b, #view3c'),
    'view4' : $('#view4a, #view4b, #view4c'),
    'viewBlank' : $("#view0")
};

そして行を追加しました

// show current
    $.viewMap[$(this).val()].show();
    $.viewMap['viewBlank'].show();
    $('#viewSelect1').show();
于 2012-07-30T13:57:58.817 に答える
0

変化する

$('#viewSelect1').show()

に

$('#viewSelect1')
             .show()
             .find('option:visible:first')  // get the first visible option
             .attr('selected', 'selected'); // set that option as selected

デモ

コメントによると

   $('#viewSelector').change(function() {
        var str = $('#viewSelect1 option:selected').attr('id').replace(/view\d/,'');
        // hide all
        $.each($.viewMap, function() {
            this.hide();
        });
        $('#viewSelect1').hide();
        // show current
        $.viewMap[$(this).val()].show();
        $('#viewSelect1')
            .show()
            .find('option:visible[id*='+ str+']')
            .attr('selected', 'selected');
    });

デモ

于 2012-07-30T13:58:02.937 に答える