Question

我的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/

Answer 1

简单获取所选值的ID并添加所选属性。

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');
});
});

Answer 2

已编辑这是一个有效的jsFiddle example

添加了

<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();

Answer 3

更改

$('#viewSelect1').show()

到

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

<强> Demo

根据评论

   $('#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');
    });

<强> DEMO

jQuery如何显示/隐藏Select by Select

3 个答案:

根据评论