使用JQuery的单选按钮的可更改选项列表

时间：2016-05-04 14:37:16

标签： javascript jquery html

我的目的是创建一个html页面，以便在单击其他单选按钮时选项列表发生变化。当我选择任何＆＃39;原子＆＃39;时，＆＃39;功能列表＆＃39;应该改变。

我有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script type=text/javascript src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <a class="navbar-brand" href="/">Copy Cats</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About Us</a></li>
            <li><a href="/select_doc">Detect Plag!</a></li>
            <li><a href="/select_folder">Bulk Analysis!</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

<div class="container" xmlns="http://www.w3.org/1999/html">
    <h1>Pick your plag</h1>
    <div class="jumbotron">

        <div class="form-group">
            <form action='/view_doc'>
                <select name="doc">
                    <option value='head_training_sample'>head_training_sample</option>
                    <option value='test2'>test2</option>
                    <option value='source2'>source2</option>
                    <option value='PMC4449985'>PMC4449985</option>
                    <option value='hamlet_clean'>hamlet_clean</option>
                </select>

                <div class="form-group">
                    <select name="k">
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>

                    <select id="features" name="features" multiple>
                    </select>

                    <select name="similarity_measure">
                        <option value="euclidean">euclidean</option>
                        <option value="cosine">cosine</option>
                        <option value="correlation">correlation</option>
                        <option value="cityblock">cityblock</option>
                        <option value="chebyshev">chebyshev</option>
                    </select>

                    <select name="cluster_method">
                        <option value="kmeans">kmeans</option>
                        <option value="agglom">agglom</option>
                        <option value="hmm">hmm</option>
                        <option value="none">none</option>
                    </select>
                    <br>
                    <input type="radio" id="atom" name="atom" value="paragraph"> paragraph<br>
                    <input type="radio" id="atom" name="atom" value="sentence"> sentence<br>
                    <input type="radio" id="atom" name="atom" value="word"> word<br>
                </div>
                <div class="form-group">
                    <input type='submit' value='Select'>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
if ('undefined' == typeof window.jQuery) {
   alert("Jquery is not loaded");
} else {
   $('#atom').change(function(event) { 
      if($("#atom").val()=="paragraph"){
          $("#features").empty();
          $('#features').append($("<option></option>").attr("value","average_word_length").text("average_word_length"));
          $('#features').append($("<option></option>").attr("value","average_sentence_length").text("average_sentence_length"));
          $('#features').append($("<option></option>").attr("value","stopword_percentage").text("stopword_percentage"));
          $('#features').append($("<option></option>").attr("value","punctuation_percentage").text("punctuation_percentage"));
          $('#features').append($("<option></option>").attr("value","syntactic_complexity").text("syntactic_complexity"));
          $('#features').append($("<option></option>").attr("value","avg_internal_word_freq_class").text("avg_internal_word_freq_class"));
          $('#features').append($("<option></option>").attr("value","avg_external_word_freq_class").text("avg_external_word_freq_class"));
          $('#features').append($("<option></option>").attr("value","yule_k_characteristic").text("yule_k_characteristic"));
     }

    if($("#atom").val()=="sentence"){
        $("#features").empty();
        $('#features').append($("<option></option>").attr("value","average_sentence_length").text("average_sentence_length"));
        $('#features').append($("<option></option>").attr("value","stopword_percentage").text("stopword_percentage"));
        $('#features').append($("<option></option>").attr("value","punctuation_percentage").text("punctuation_percentage"));
        $('#features').append($("<option></option>").attr("value","syntactic_complexity").text("syntactic_complexity"));
        $('#features').append($("<option></option>").attr("value","avg_internal_word_freq_class").text("avg_internal_word_freq_class"));
        $('#features').append($("<option></option>").attr("value","avg_external_word_freq_class").text("avg_external_word_freq_class"));
        $('#features').append($("<option></option>").attr("value","yule_k_characteristic").text("yule_k_characteristic"));
    }

    if($("#atom").val()=="word") {
      $("#features").empty();
      $('#features').append($("<option></option>").attr("value","average_word_length").text("average_word_length"));
      $('#features').append($("<option></option>").attr("value","stopword_percentage").text("stopword_percentage"));
      $('#features').append($("<option></option>").attr("value","punctuation_percentage").text("punctuation_percentage"));
      $('#features').append($("<option></option>").attr("value","syntactic_complexity").text("syntactic_complexity"));
      $('#features').append($("<option></option>").attr("value","avg_internal_word_freq_class").text("avg_internal_word_freq_class"));
      $('#features').append($("<option></option>").attr("value","avg_external_word_freq_class").text("avg_external_word_freq_class"));
      $('#features').append($("<option></option>").attr("value","yule_k_characteristic").text("yule_k_characteristic"));
  }
  });
}

</script>

    

但是，我有两个问题：

  1. 如果我没有点击“＆＃39;段落”，则不会显示这些功能。第一
  2. 当我点击其他按钮
    3. 时，功能列表根本没有变化

    有人能告诉我我做错了吗？

1 个答案:

答案 0 :(得分：1)

您的单选按钮不应使用相同的ID。使用相同的类。例如：class =“atomClass”

我改变了你的代码：

/api
if ('undefined' == typeof window.jQuery) {
   alert("Jquery is not loaded");
} else {
   $('.atomClass').click(function(event) {
   which = $(this).val();
   switch(which){
      case "paragraph":
          $("#features").empty();
          $('#features').append($("<option></option>").attr("value","average_word_length").text("average_word_length"));
          $('#features').append($("<option></option>").attr("value","average_sentence_length").text("average_sentence_length"));
          $('#features').append($("<option></option>").attr("value","stopword_percentage").text("stopword_percentage"));
          $('#features').append($("<option></option>").attr("value","punctuation_percentage").text("punctuation_percentage"));
          $('#features').append($("<option></option>").attr("value","syntactic_complexity").text("syntactic_complexity"));
          $('#features').append($("<option></option>").attr("value","avg_internal_word_freq_class").text("avg_internal_word_freq_class"));
          $('#features').append($("<option></option>").attr("value","avg_external_word_freq_class").text("avg_external_word_freq_class"));
          $('#features').append($("<option></option>").attr("value","yule_k_characteristic").text("yule_k_characteristic"));
     break;

    case "sentence":
        $("#features").empty();
        $('#features').append($("<option></option>").attr("value","average_sentence_length").text("average_sentence_length"));
        $('#features').append($("<option></option>").attr("value","stopword_percentage").text("stopword_percentage"));
        $('#features').append($("<option></option>").attr("value","punctuation_percentage").text("punctuation_percentage"));
        $('#features').append($("<option></option>").attr("value","syntactic_complexity").text("syntactic_complexity"));
        $('#features').append($("<option></option>").attr("value","avg_internal_word_freq_class").text("avg_internal_word_freq_class"));
        $('#features').append($("<option></option>").attr("value","avg_external_word_freq_class").text("avg_external_word_freq_class"));
        $('#features').append($("<option></option>").attr("value","yule_k_characteristic").text("yule_k_characteristic"));
    break;

    default:
      $("#features").empty();
      $('#features').append($("<option></option>").attr("value","average_word_length").text("average_word_length"));
      $('#features').append($("<option></option>").attr("value","stopword_percentage").text("stopword_percentage"));
      $('#features').append($("<option></option>").attr("value","punctuation_percentage").text("punctuation_percentage"));
      $('#features').append($("<option></option>").attr("value","syntactic_complexity").text("syntactic_complexity"));
      $('#features').append($("<option></option>").attr("value","avg_internal_word_freq_class").text("avg_internal_word_freq_class"));
      $('#features').append($("<option></option>").attr("value","avg_external_word_freq_class").text("avg_external_word_freq_class"));
      $('#features').append($("<option></option>").attr("value","yule_k_characteristic").text("yule_k_characteristic"));
  
  }
  });
}

相关问题
最新问题