1
我的意圖是創建一個html頁面，使得當我點擊一個不同的單選按鈕時選項列表發生變化。當我選擇任何'原子'時，'功能'的列表應該改變。使用jQuery單選按鈕的可變選項列表
我有以下代碼：
<!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>
不過，我有兩個問題：
- 如果我不點擊「段落中的功能不會出現'先。
- 當我點擊不同的按鈕的功能列表並沒有改變在所有
有誰告訴我什麼，我做錯了什麼？