1

我需要一些关于我的 jquery 脚本的帮助。

我有两个select盒子。当我从第一个select框中选择一个选项时，第二个框应显示所有可用选项中的 3 个项目。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 回答