Javascript 如何创建multiselect以显示Django中每个选定项的详细信息？_Javascript_Jquery_Python_Django

Javascript 如何创建multiselect以显示Django中每个选定项的详细信息？

javascript jquery python django

Javascript 如何创建multiselect以显示Django中每个选定项的详细信息？,javascript,jquery,python,django,Javascript,Jquery,Python,Django,我想创建一个像图片一样的小演示，如果我单击左栏中的项目选择国家，右栏将在左栏中显示我选择的国家的所有城市。我该怎么做我写了一个小样本，希望它能帮助您： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <style> select {

我想创建一个像图片一样的小演示，如果我单击左栏中的项目选择国家，右栏将在左栏中显示我选择的国家的所有城市。我该怎么做

我写了一个小样本，希望它能帮助您：

<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <style>
         select {
         min-width: 100px;
         float: left;
         margin-right: 20px;
         }
      </style>
   </head>
   <body>
      <select id="countrySelect" size="10"></select>
      <select id="citySelect"  size="10"></select>
      <script>
         var countries = [{name: "USA", id:1}, {name: "Canada", id:2}];             
         var cities = [{name: "New York", id:1, countryId:1}, {name: "Boston", id:2, countryId:1}, {name: "Ottawa", id:3, countryId:2}, {name: "Toronto", id:4, countryId:2}];

         var $countrySelect = $('#countrySelect');
         var $citySelect = $('#citySelect'), countrySelectHtml = '';
         for (var i=0; i<countries.length; i++) $countrySelect.append($('<option>').attr('value', countries[i].id).text(countries[i].name));

         $countrySelect.change(function () {
            var countryId = $countrySelect.val();
            $citySelect.html('');
            for (var i=0; i<cities.length; i++) 
                if (cities[i].countryId == countryId) $citySelect.append($('<option />').attr('value', cities[i].id).text(cities[i].name));
         });

         $citySelect.change(function () {
            alert('Selected city: ' + $(this).find('option:selected').text() + ' (id=' + $citySelect.val() + ')');
         });

      </script>
</html>


挑选{
最小宽度：100px；
浮动：左；
右边距：20px；
}
var国家=[{名称：“美国”，id:1}，{名称：“加拿大”，id:2}]；
var cities=[{name:“纽约”，id:1，countryId:1}，{name:“波士顿”，id:2，countryId:1}，{name:“渥太华”，id:3，countryId:2}，{name:“多伦多”，id:4，countryId:2}]；
var$countrySelect=$（“#countrySelect”）；
var$citySelect=$（'#citySelect'），countrySelectHtml=''；
对于（var i=0；i