Home Forums Porto Admin Template Select2

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10030992
    mushi
    Participant

    Hello,

    I have two(2) select2 drop down
    1. having some groups fruits, vegetables etc
    2. number of count

    initially 2nd select2 drop down(Count) must be disabled it should only be enable when user select something from fruits or vegetables group
    Image
    hope you understand my problem.

    and one more thing select2 lost some of its with please look into this i know how to explain
    Image2



    Template Version: 2.2.0
    #10030999
    Support2
    Keymaster

    Hello,

    1) You can use the event change.select2 to make a conditional field. For example:

    HTML:

    <select id="fruitsvege" data-plugin-selectTwo class="form-control populate">
    	<optgroup label="Fruits">
    		<option value="fruit1">Fruit 1</option>
    		<option value="fruit2">Fruit 2</option>
    		<option value="fruit3">Fruit 3</option>
    	</optgroup>
    	<optgroup label="Vegetables">
    		<option value="vege1">Vege 1</option>
    		<option value="vege2">Vege 2</option>
    		<option value="vege3">vege 3</option>
    	</optgroup>
    	<optgroup label="Heros">
    		<option value="hero1">hero 1</option>
    		<option value="hero2">hero 2</option>
    		<option value="hero3">vege 3</option>
    	</optgroup>
    </select>
    
    <div class="custom-conditional-field d-none">
    	<select id="extra" data-plugin-selectTwo class="form-control populate">
    		<option value="opt1">opt 1</option>
    		<option value="opt1">opt 1</option>
    		<option value="opt1">opt 1</option>
    		<option value="opt1">opt 1</option>
    	</select>
    </div>

    (js/custom.js):

    $('#fruitsvege').on('change.select2', function(e){
    	var values = ['fruit1', 'fruit2', 'fruit3', 'vege1', 'vege2', 'vege3'];
    
    	if( values.includes( $(this).val() ) ) {
    		$('#extra').parent().removeClass('d-none');
    	} else {
    		$('#extra').parent().addClass('d-none');
    	}
    });

    2) Regarding the select2 width, try with this:

    <select id="fruitsvege" data-plugin-selectTwo class="form-control populate" style="width: 100%;">

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    • This reply was modified 1 month, 3 weeks ago by Support2.
Viewing 2 posts - 1 through 2 (of 2 total)