【问题标题】:bootstrap multiselect keep selection on change引导多选保持选择更改
【发布时间】:2014-12-15 14:43:04
【问题描述】:

我有一个下拉框,我正在使用引导多选复选框。你能告诉我(或指向一些文档)我如何在页面重新加载后保持选择?用户检查选项 1,3 并推送搜索,页面显示搜索但必须保留所选选项。谢谢。

引导多选版本:0.9.8

选择选项

<select name="people[]" id="multiselect" multiple="multiple">
<option value ="Val 1" >    Val 1</option>
<option value ="Val 2" >    Val 2</option>
<option value ="Val 3" >    Val 3</option>
</select>

JavaScript

 <script type="text/javascript">
      $(document).ready(function() {
          $('#people').multiselect(
              {
                  enableFiltering: true,
                  filterBehavior: 'both',
                  maxHeight: 200,
                  buttonWidth: '400px',
                  enableCaseInsensitiveFiltering: true,
                  nSelectedText: ' - selected values'
              }
          );
      });
 </script>

【问题讨论】:

  • 设置一个cookie。 github.com/carhartl/jquery-cookie
  • 重要提示:Java 不是 JavaScript。你正在编写 JavaScript。 Java 是一种完全不同的语言。

标签: javascript jquery twitter-bootstrap multi-select bootstrap-multiselect


【解决方案1】:

我设法解决了这个问题。

我创建了一个数组来保存所有选项。

<?php 
$optag = array(1=>'Option 1', 2=>'Option 2', 3=>'Option 3');
$reqag = $_REQUEST['people'];
?>

和选择

<select name="agent[]" id="multiselect" multiple="multiple">
  <?php foreach ( $optag as $i=>$opt ) : ?>
    <option value="<?php echo $opt ?>"<?php if(isset($reqag) && in_array($opt, $reqag)) echo '   selected'; ?>><?php echo $opt ?></option>
  <?php endforeach; ?>
</select>

JavaScript 部分

<script type="text/javascript">
  $(document).ready(function() {
      $('#people').multiselect(
          {
              enableFiltering: true,
              filterBehavior: 'both',
              maxHeight: 200,
              buttonWidth: '400px',
              enableCaseInsensitiveFiltering: true,
              nSelectedText: ' - selected values'
          }
      );
  });
 </script>

【讨论】:

    猜你喜欢
    • 2015-10-21
    • 1970-01-01
    • 2013-06-22
    • 1970-01-01
    • 2012-09-05
    • 1970-01-01
    • 2019-08-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多