我正在尝试编写一个代码，最终用户可以从下拉菜单中选择一个文件，并且该文件将通过 Cytoscape.js 显示为网络。我的代码从服务器获取 JSON 文件并使用 Cytoscape 将文件显示为网络，但它不适用于下拉列表。我对 AJAX 和 Jquery 相当陌生。任何帮助将不胜感激。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Test Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<body>
<div id="cy"></div>
<style>
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 60%;
width: 60%;
position: absolute;
left: 0;
top: 0;
}
<select class="sel" id="cy" name="files">
<option value="">Select Bait Protein</option>
<option value="CASP9">CASP9.cyjs</option>
</select><br>
<script>
$(function()
{
file_name = $('select').val();
$('#cy').load(file_name);
$.get( 'cy', function( data ) {
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'center',
'color': 'white',
'text-outline-width': 2,
'text-outline-color': '#888'
})
.selector('edge')
.css({
'target-arrow-shape': 'square',
'width': 5,
'line-color': '#ddd',
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements : JSON.parse(data),
ready: function() {
window.cy = this;
cy.elements().unselectify();
cy.on('tap', 'node', function(e) {
var node = e.cyTarget;
var neighborhood = node.neighborhood().add(node);
cy.elements().addClass('faded');
neighborhood.removeClass('faded');
});
cy.on('tap', 'edge', function(e) {
if (e.cyTarget === cy) {
cy.elements().removeClass('faded');
}
});
}
})
})
});
最佳答案
我在下面得到了这个工作。此外，还添加了一个 change 监听器，因为您的代码尝试加载一次内容，并且不会对 select 更改使用react。
$('select').on('change', function(){
// your code
});
关于javascript - 通过从下拉菜单中进行选择，使用 Cytoscape.js 显示 JSON 文件内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41454553/