Question

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

我有2个选择框;一个列表s / w（工具）和一个工具版本。我希望能够选择一个工具，显示工具版本选择框并将特定于版本的数据写入屏幕。只要用户在选择版本之前没有选择其他工具，这样就可以正常工作。

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

它应该像这样简单，不起作用：

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

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

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

HTML Pastie： http://pastie.org/2685522

非常感谢任何帮助。

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

Answer 1

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

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

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

除了所选工具的fieldset和selectbox之外，它会隐藏所有内容。

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

});

<强> 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>

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

1 个答案: