jQuery如何显示/隐藏Select by Select

jQuery how to show/hide Select by Select

本文关键字：Select 隐藏 by 显示 何显示 jQuery      更新时间：2024-05-19

我需要一些关于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/

简单地获取所选值的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');
});
});

编辑这里是一个工作的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();

更改

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

DEMO

相关文章：