javascript - jQuery Selectmenu 插件 - 无法隐藏选择框

Question

我正在使用由 Filament Group 创建的“Selectmenu”插件。我无法提供超链接，因为我在 Stackoverflow 上发布的内容还不够多，无法使用 2 个以上的超链接。

我有 2 个选择框；一份列出软件(工具)，一份列出工具版本。我希望能够选择一个工具，显示工具版本选择框并将特定于版本的数据写入屏幕。只要用户在选择版本之前不选择其他工具，这种方法就可以正常工作。

当用户选择工具而不选择版本时，先前版本的选择框不会隐藏。例如，如果用户选择“cgs”，则会显示“cgs versions”选择框。但是，如果用户没有选择版本而是选择另一个工具，例如“dpss”，则“dpss 版本”选择框会出现，但“cgs 版本”选择框不会隐藏。

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

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

我将其放置在检查工具版本的 If 语句中。

Javascript Pastie: http://pastie.org/2695842

HTML 粘贴: http://pastie.org/2685522

任何帮助将不胜感激。

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

Answer 1

如果有人感兴趣，我已经解决了。我认为我的问题与Selectmenu plugin有关。我从示例代码开始，并尝试使我的代码适合其结构。我确信有人比我拥有更多 Javascript 经验，可以将其转化为更少的代码行。

无论如何， secret 是为包含“工具”选择框的字段集创建一个 ID，然后在选择该工具后立即调用以下代码:

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

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

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

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

这两项更改允许删除其他脚本，从而使代码变得冗长。最后，我不是 100% 确定为什么这会起作用，但我很高兴它能起作用。下面是最终的 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);
      } 
    }
  });

});

HTML

    <div id="tb" class="qualifier">
      <form id="info" action="">
        <fieldset id="fs-tool">
          <select name='tool' id='tool'>
            <option value="none" selected>Select a tool...</option>
            <option value="cgs" >CGS/GXP</option> 
            <option value="dpss">DPSS</option> 
            <option value="elt5500">ELT5500</option> 
            <option value="iapioneer">IAPioneer</option>
          </select>
        </fieldset>

        <fieldset>
          <select id="cgs" name='cgs'> 
            <option value="none" selected>Select a version...</option>
            <option value="cgs_1.0"> CGS 1.0/GXP</option>
            <option value="cgs_1.1"> CGS 1.1/GXP</option>
          </select> 
        </fieldset>

        <fieldset> 
          <select id="dpss" name='dpss'>
            <option value="none" selected>Select a version...</option>
            <option value="dpss_2.0">DPSS 2.0</option>
            <option value="dpss_2.0.7.29">DPSS 2.0.7.29</option>
          </select>           
        </fieldset>

        <fieldset>
          <select id="elt5500" name='elt5500'>
            <option value="none" selected>Select a version...</option>
            <option value="elt5500_4.0">ELT5500 PRO 4.0/CGS 2.1</option>
            <option value="elt5500_4.1">ELT5500 PRO 4.1/CGS 2.1</option>
          </select> 
        </fieldset>  

        <fieldset>
          <select id="iapioneer" name='iapioneer'>
            <option value="none" selected>Select a version...</option>
            <option value="iapioneer_2.1">IAPioneer/CGS 2.3.1</option>
          </select> 
        </fieldset>
      </form>
    </div>
    <br />
    <div id="val_scenarios"></div>