如果选中了“全选”选项，则使用bootstrap multiselect显示div

Question

After Selecting "Select All" option in the drop down list,I'll click on a generate graph button.Then I want to display a chart containing of all options in the drop down list in a particular div using bootstrap multi-select. 在下拉列表中选择“全选”选项后，我将单击“生成图形”按钮。然后，我想使用引导多重选择在特定的div中显示包含下拉列表中所有选项的图表。

My code: 我的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Multi Select Dropdown with Checkboxes</title>
  <link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" />
  <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="js/bootstrap-2.3.2.min.js"></script>
  <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<div id="PiDiv"></div>
<div id="AllDiv"></div>
<form id="form1">
  <div style="padding:20px">
    <label>Select Country</label>
    <select id="selectId" multiple="multiple">
      <option value="India">India</option>
      <option value="Japan">Japan</option>
      <option value="Germany">Germany</option>
      <option value="Nepal">Nepal</option>
      <option value="Iraq">Iraq</option>
      <option value="China">China</option>
    </select><br /><br />
    <input type="button" id="btnget" value="Get Selected Values" />
    <script type="text/javascript">
      $(function() {
        $('#selectId').multiselect({
          includeSelectAllOption: true
        });
        $('#btnget').click(function() {
          alert($('#selectId').val());
          if($('#selectId').val() == "India"){
            $("#PiDiv").load("/home/divya/html_docs/pi.html");
          }
        })
      });
    </script>
  </div>
</form>
</body>
</html>

I'm able to select one option and display its corresponding chart.But for select all option,I'm not getting how to display a div after clicking on a generate graph button.Can anyone please suggest me on this issue ... 我能够选择一个选项并显示其对应的图表。但是对于全选选项，单击生成图形按钮后我没有得到如何显示div的信息。有人可以在这个问题上建议我...

Answer 1

try this option. 试试这个选项。 Change the html to below and replace your URL in data-url 将html更改为下面，并在data-url替换您的URL

<select id="selectId" multiple="multiple">
    <option value="India" data-url="<!-- URL -->">India</option>
    <option value="Japan" data-url="<!-- URL -->">Japan</option>
    <option value="Germany" data-url="<!-- URL -->">Germany</option>
    <option value="Nepal" data-url="<!-- URL -->">Nepal</option>
    <option value="Iraq" data-url="<!-- URL -->">Iraq</option>
    <option value="China" data-url="<!-- URL -->">China</option>
</select>

jQuery Code jQuery代码

$('#btnget').click(function() {
    $("#PiDiv").empty();
    $('#selectId option:selected').each(function(index,elem){
        if(typeof $(elem).data('url') != "undefined"){
            $.get( $(elem).data('url'), function( data ) {
                $("#PiDiv").append(data);
            });
        }
    });
})

如果选中了“全选”选项，则使用bootstrap multiselect显示div

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-08-25 09:45:21

如果选中了“全选”选项，则使用bootstrap multiselect显示div

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-08-25 09:45:21

解决方案1
0 已采纳 2015-08-25 09:45:21