Question

所以我试图做一个非常基本的形式，当用户选择并选择它时，它会显示更多的相关框。我发现这里的一些东西非常相似，我可以让它们在jsfiddle中工作，但不能让它们在我的页面上工作。想知道我做错了什么。在我的脑海中，我只有标准的查询链接和我文件的链接。我也试过把脚本本身（带有适当的周围代码）放在我的文件的头部，它仍然无法正常工作。

我的第二个问题是，我希望我的javascript在外部文件中。这个脚本看起来与我过去使用的其他脚本略有不同，所以我希望能帮助它使外部友好。

<fieldset>
 <form action="add_card.php" method="post">
 <legend>TEST</legend>
 Parallel: <select name="parallel" id="parallel">
  <option></option>
  <option value="Insert">insert</option>
  <option value="Base">base</option>
  <option value="Award">award</option>    
 </select>
 <div id="insert" style="display:none;">    
   Pack: <input type="string" name="pack" id="pack"></label>
 </div>
 <input type="submit" />
 </form>
</fieldset>

现在我的外部文件看起来像这样

$('#parallel').on('change',function(){
    if( $(this).val()==="Insert"){
    $("#insert").show()
    }
    else{
    $("#insert").hide()
    }
});

这是在jsfiddle中工作，我现在删除了一些不太重要的东西。 link

//编辑必须修复从两个地方复制代码的拼写错误。

Answer 1

尝试使用更改功能

Collections.sort( map, new Comparator<Map.Entry<K, V>>()
{
    @Override
    public int compare( Map.Entry<K, V> entry1, Map.Entry<K, V> entry2)
    {
        return (entry1.getValue()).compareTo( entry2.getValue() );
    }
} );

Answer 2

尝试selectedIndex和toggle()：

$(function() {
  var insert = $('#insert');
  $('#parallel').on('change', function(e) {
    insert.toggle(1 === this.selectedIndex); // option index for `insert`
  });
});

#insert {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset>
  <legend>TEST</legend><!-- moved out off the form tag -->
  <form action="add_card.php" method="post">
    Parallel:
    <select name="parallel" id="parallel">
      <option></option>
      <option value="Insert">insert</option>
      <option value="Base">base</option>
      <option value="Award">award</option>
    </select>
    <br/><!-- added -->
    <div id="insert">
      Pack:
      <input type="string" name="pack" id="pack"><!-- removed </label> -->
    </div>
    <br/><!-- added -->
    <input type="submit" />
  </form>
</fieldset>

P.S。您的帖子中有一个不会打开标记的结束</label>代码。

详细了解$.toggle()和select.selectedIndex

Answer 3

脚本应在html可用后加载，因此请务必将脚本放在</body>之后而不是<head>之后。

由于你正在使用jQuery，你可以采用一种不那么突兀的方法（即如果你有多个选择或选项可以在更改时产生额外的子项，你可以使用类或数据 - 属性。）

最后一定要将你的方法包装在'文档就绪'函数中，使用常用方法或jQuery方法：

( function( $ ) { }( jQuery ) );

所有这些都可以让你有类似的东西：

HTML ：

<html> <head> <title>example</title>  </head> ... <body> ... <fieldset> <form action="add_card.php" method="post"> <legend>TEST</legend> Parallel: <select name="parallel" class="has-extra-hidden-children"> <option></option> <option value="Insert">insert</option> <option value="Base">base</option> <option value="Award">award</option> </select> <div class="is-extra-hidden-child" style="display:none;"> Pack: <input type="string" name="pack" id="pack"> </div> <input type="submit" /> </form> </fieldset> ... </body>  ... </html>

JavaScript文件：

( function( $ ) { $( '.has-extra-hidden-children' ).each ( function() { var newthis = $( this ); $( newthis ).on ( 'change', function() { if( $( this ).val() === 'Insert' ) { $( this ).find( '.is-extra-hidden-child' ).show(); } else { $( this ).find( '.is-extra-hidden-child' ).hide(); } } ); } ); }( jQuery ) );

希望有所帮助

Javascript无法使用表单输入和隐藏选项

3 个答案: