jQuery选择菜单插件-不能隐藏选择框

jQuery Selectmenu Plugin - Can't Hide Selectbox

本文关键字：选择 隐藏 不能 插件 菜单 jQuery      更新时间：2023-09-26

我使用的是由长丝组创建的"Selectmenu"插件。我不能提供一个超链接，因为我没有张贴足够的Stackoverflow使用超过2个超链接。

我有两个选择框;一个是工具清单，另一个是工具版本清单。我希望能够选择一个工具，显示工具版本选择框，并将特定版本的数据写入屏幕。只要用户在选择版本之前不选择其他工具，这就可以正常工作。

当用户选择工具而不选择版本时，以前的版本选择框不会隐藏。例如，如果用户选择"cgs"，则显示"cgs版本"选择框。但是，如果用户没有选择版本，而是选择了另一个工具，例如"dpss"，则显示"dpss版本"选择框，但不隐藏"cgs版本"选择框。

应该像这样简单，这是行不通的:

$("select:not(#cgs)").hide();

我将它放在If语句中，该语句检查工具版本。

Javascript粘贴: http://pastie.org/2695842

HTML馅饼: http://pastie.org/2685522

任何帮助都将是非常感激的。

现场演示(使用上面链接的jQuery和HTML):在JS Fiddle: http://jsfiddle.net/davidThomas/Na9Wq/.

如果有人感兴趣，我已经解决了。我认为我的问题与w/Selectmenu插件有关。我开始w/示例代码，并试图使我的代码适合w/在它的结构。我相信比我更有Javascript经验的人可以把它变成更少的代码行。

无论如何，秘诀是为包含"工具"选择框的字段集创建一个ID，然后在工具被选中后立即调用以下代码:

$('fieldset:not(#fs-tool, ' + tool + ')').hide();

这将隐藏所选工具的字段集和选择框之外的所有内容。

$('select:not(#tool, ' + tool + ')').hide();在这里不工作。

另外，我为第一次运行添加了"lasttool = tool;"，否则将根据用户选择它们的顺序显示多个版本选择框。

这两个更改允许删除使代码冗长的其他脚本。最后，我不是百分之百确定为什么这是有效的，但我很高兴它做到了。下面是最终的Javascript和HTML。

Javascript 

$(document).ready(function(){
  var tool;     //The selected tool
  var version;  //The selected tool version
  var lasttool; //The previously selected tool
  $('select#tool').selectmenu({
    // use select callback
    select: function(event, options) {
      tool = options.value;
      $('select#'+tool).val("none");  //This resets the version selectbox to "Select a version".  Otherwise the last version selected shows and the ".change(function(){..." does not fire.         
      $('fieldset:not(#fs-tool, ' + tool + ')').hide();   //Hide everything except the fieldset and selectbox for the selected tool.
                                                          //"$('select:not(#tool, ' + tool + ')').hide();" does not work here 
      if (tool == "cgs") {  
        lasttool = tool;  //Set lasttool= tool for 1st run through, otherwise multiple version selectboxes will show depending on order in which user selects                     
        $('select#'+tool).selectmenu({maxHeight: 150}).parent("fieldset").hide();       //Without this, the version selectbox won't show
        $('select#'+lasttool).selectmenu({maxHeight: 150}).parent("fieldset").hide();   //Hide the last tool version selected
        $('select#'+tool).parent("fieldset").show();  //This shows the version selectbox
        $("#cgs").change(function(){
           version = $(this).val();
           document.getElementById("val_scenarios").innerHTML=(tool + " - " + version);
           lasttool = tool;   //Must keep track to hide later, if needed
         });
      } else if (tool == "dpss"){
        $('select#'+tool).selectmenu({maxHeight: 150}).parent("fieldset").hide();
        $('select#'+lasttool).selectmenu({maxHeight: 150}).parent("fieldset").hide();
        $('select#'+tool).parent("fieldset").show();
        $("#dpss").change(function(){
           version = $(this).val();
           document.getElementById("val_scenarios").innerHTML=(tool + " - " + version);
           lasttool = tool;
         });            
      } else if (tool == "elt5500"){
        $('select#'+tool).selectmenu({maxHeight: 150}).parent("fieldset").hide();
        $('select#'+lasttool).selectmenu({maxHeight: 150}).parent("fieldset").hide();
        $('select#'+tool).parent("fieldset").show();
        $("#elt5500").change(function(){
           version = $(this).val();
           document.getElementById("val_scenarios").innerHTML=(tool + " - " + version);
           lasttool = tool;
         });  
      } else if (tool == "iapioneer"){  
        $('select#'+tool).selectmenu({maxHeight: 150}).parent("fieldset").hide();
        $('select#'+lasttool).selectmenu({maxHeight: 150}).parent("fieldset").hide();
        $('select#'+tool).parent("fieldset").show();
        $("#iapioneer").change(function(){
           version = $(this).val();
           document.getElementById("val_scenarios").innerHTML=(tool + " - " + version);
           lasttool = tool;
         });   
      } else {
        $('select#'+lasttool).parent("fieldset").hide();  //Hide the last tool version selectbox when "Select a tool" is selected instead of an actual tool"
        document.getElementById("val_scenarios").innerHTML=("Tool: " + tool + "; Version - " + version + "; Last Tool - " + lasttool);
      } 
    }
  });
});

相关文章：