Question

我有以下标记

$('select').material_select();

以下是JavaScript代码

DECLARE
    CURSOR CUR IS
        SELECT COLUMN_NAME
        FROM ALL_TAB_COLS
        WHERE TABLE_NAME='TABLE_A';
    STMT   VARCHAR(1000);
    RESULT VARCHAR(1000);
BEGIN
    STMT := 'SELECT ';
    FOR COL in CUR
    LOOP
        STMT := STMT || COL.COLUMN_NAME || '||';
    END LOOP;
    STMT := STMT || ''''' FROM TABLE_A WHERE ID=1';
    DBMS_OUTPUT.PUT_LINE( STMT );
    EXECUTE IMMEDIATE
        STMT
        INTO RESULT;
    DBMS_OUTPUT.PUT_LINE( 'RESULT: ' || RESULT );
END;

实现使用复选框。

fiddle

如何检查/取消选中所有功能，我搜索了很多内容，但没有找到任何相关内容。

Answer 1

MaterialiseCSS内部不支持此功能。但是，这可以使用jQuery的DOM操作方法来实现。

绑定click事件：该插件会在initialized上添加<select>课程，并为以<ul>开头的相应select-options-添加唯一ID。我们可以使用这些知识来选择第一个<li>孩子，即＆＃34; Check All＆＃34;下拉列表中的选项。
检查＆＃34;全部检查＆＃34;选择与否：插件将在所选项目上添加active类。使用hasClass()，我们可以检查active类是否已添加到选择中的第一个选项中。
选择/取消选择其他选项：使用上一步，我们可以获得＆＃34;全部检查＆＃34;的状态。使用它，我们可以迭代其他选项并在适当的元素上触发click事件。
奖励更新选项文字：要更新选项文字，请使用text()方法获取文字，然后与Check All进行比较。使用contents()和textContent可以轻松更新文字。

注意：此代码完全取决于第三方插件创建的DOM元素。如果更新后，插件会更改HTML结构，此代码将无法运行或需要相应更新。

Demo

＆＃13;

$('select').material_select();

$('select[select-all].initialized').prev('ul[id^="select-options-"]').children('li:first').on('click', function() {
  var selector = 'li.active';
  if ($(this).hasClass('active')) {
    selector = 'li:not(".active")';
  }

  $(this).siblings(selector).each(function() {
    $(this).click();
  });

  $('span', this).contents().last()[0].textContent = $(this).text().trim() === 'Check All' ? 'Uncheck All' : 'Check All';
  // Check values of selected options
  console.log($(this).parent().next().val());
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>


With "select-all" option
<div class="input-field col s5">
  <select multiple select-all searchable="search here..">
    <option value="0">Check All</option>
    <option value="1">Yellow</option>
    <option value="2">Green</option>
    <option value="3">Pink</option>
    <option value="4">Orange</option>
  </select>
  <label>Materialize Multiple Select</label>
</div>


<br />
Without "Select All" option
<div class="input-field col s5">
  <select multiple searchable="Animals">
    <option value="0">Cat</option>
    <option value="1">Dog</option>
    <option value="2">Horse</option>
    <option value="3">Pig</option>
    <option value="4">Lion</option>
  </select>
  <label>Materialize Multiple Select</label>
</div>

＆＃13;

Answer 2

据我所知，我认为这就是你想要的

$('ul.dropdown-content li').first().click(function(){    
  $('ul.dropdown-content li:not(:first-child)').each(function(index) {
           $(this).find("input[type=checkbox]").prop("checked", $('ul.dropdown-content li').first().find("input[type=checkbox]").prop("checked"));                       
        });
});

更新了小提琴https://jsfiddle.net/xv0p06d3/21/

只是要小心这个，因为我正在使用Materialise中的一个类......所以，如果类更改，你需要更改代码。您可以找到一种方法来使用自己的代码来获取ul / li元素。

希望它有所帮助。

<强>更新
上面的答案是纯粹的jquery（作为你的小提琴，只是jquery）......你用angular实现这个工作的一种方法是创建一个这样的指令。

app.directive('selectMultiple', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).find('select').material_select();
            $(element).find("ul li").first().click(function(){  
            $(element).find("ul li:not(:first-child)").each(function(index) {
                   $(this).find("input[type=checkbox]").prop("checked", $(element).find("ul li").first().find("input[type=checkbox]").prop("checked"));                      
                 });
            });
        }
    };
});

检查角度小提琴http://jsfiddle.net/TH87t/1545/

亲切的问候。

Answer 3

Materialise是关于UX元素应如何表现和视觉交互的观点。因为我建议你添加个人jQuery函数来修复你想要这样做：

    // Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    }
});

<input type="checkbox" name="select-all" id="select-all" />

Answer 4

物化很难定制！正如您将在inspect元素中看到的那样，您的select正在使用类public void addUser(DataPojo pojo){ ServiceInterface serviceInterface=ServiceClass.connection(); Call<ListData> call=serviceInterface.saveUser(pojo); call.enqueue(new Callback<ListData>() { @Override public void onResponse(Response<ListData> response, Retrofit retrofit) { Log.v("@@@Response",""+response.toString()); if(response.isSuccess()){ Toast.makeText(AddNewUser.this,"User Added",Toast.LENGTH_LONG).show(); supportFinishAfterTransition(); } } @Override public void onFailure(Throwable t) { Log.v("@@@Failure"," Message"+t.getMessage()); } }); }编写一些不同的div。所以我使用该类来执行check / uncheck函数...

select-wrapper

Answer 5

我发现的问题是，如果您尝试使用$('select').val(...)设置值，则不会更新复选框。您需要再次手动更新$('select').material_select()来更新它们：

$('select').material_select();
$('select').on('change',function () {
    var selected=$('select').val();
  if (selected.indexOf('0')===0) {
    $('select').val(['0','1','2','3','4']).material_select();
  }
})

此变通方法标记所有选项，但关闭选择，似乎触发打开操作不起作用。 Materialise网站上关于这一点的文档很糟糕，可能没有以编程方式控制组件的选项。

这是一个不完整的演示，但你可以得到一般的想法：

https://jsfiddle.net/xv0p06d3/23/

实现选择muliple＆＃34; Check / Uncheck All＆＃34;事件

5 个答案: