Question

使用语义UI生成单个下拉列表，并使用相同的数据（选择选项）进行多个下拉列表（用户可以在任何下拉列表中选择），但只希望用户能够选择一次值（选项）。

不幸的是，我发现这样做的唯一方法是使用一些jQuery hacks在菜单项上设置$photo = $request->file('img'); $path = storage_path('app/public/avatars/'); $photo->move($path, $request->file('img')->getClientOriginalName());类（以防止它们选择）。

是否有更简单或内置的方法可用于执行此操作，或者是否有任何人对此做出最佳做法的建议或建议？

演示： https://jsfiddle.net/tripflex/qaf7x4nr/

＆＃13;

disabled

＆＃13;

$(document).ready(function(){
  // Dummy values
  window.vals = [
        {
          name: 'John Doe',
          value: 'john_doe'
        },
        {
          name: 'John Smith',
          value: 'john_smith'
        },
        {
          name     : 'Mary Doe',
          value    : 'mary_doe',
        },
        {
          name     : 'Jane Smith',
          value    : 'jane_smith',
        }
      ];

  $( '.ui.dropdown' ).dropdown(
    {
       values: window.vals, // Use dummy values to generate dropdown items
       onChange: function( selected_value, text, $choice ){
          selection_changed( selected_value );
       },
    }
  );
  
  $('.ui.form').form();

  function selection_changed( selected ){

        $form = $('.ui.form');

        // I'm using Semantic UI form validation to get all values of existing dropdown inputs,
        // this could also be done with plain jQuery as well, just makes for quicker/easier pull
        // of values
        var selected_vals = $form.form('get values', 'dropdown_input' );

        // Remove disabled class from all menu items
        $( '.ui.dropdown > .menu > .item' ).removeClass( 'disabled' );

        // Loop through each selected value and add Disabled class
        $.each( selected_vals, function( index, value ){

            if( value ){
                // Loop through each menu item
                $( '.ui.dropdown > .menu div[data-value="' + value + '"]' ).each( function(){

                    // If already has class "selected" we don't want to disable that one
                    if( ! $(this).hasClass('selected') ){
                        // Add disabled class so user can't select it in other dropdowns
                        $( this ).addClass( 'disabled' );
                    }

                });
            }
        });

  }


});

＆＃13;

.ui.form {
    padding: 1em;
}

＆＃13;

多个下拉列表，相同的选项，只允许选择一次值 - 语义UI

0 个答案: