We Keep Coding

how to select limit number of options in multiple select plugin?

I am new in jquery.
I am using multiple select plugin jquery.
I want that the user can't select more than 3 options.
Here I have also disabled the selectall option.
Here is my code:
<select multiple id='testbox'>
<option value='1'>First Option</option>
<option value='2'>Second Option</option>
<option value='3'>Third Option</option>
<option value='4'>Fourth Option</option>
<option value='5'>Fifth Option</option>
</select>
Jquery code:
$("select").multipleSelect({
selectAll: false
});
Please help me. Thanks in advance :)

EDIT :
There working jsFiddle example with multi-select plugin
var limit = 3;
var $multiSel = $("select").multipleSelect({
placeholder: "Here is the placeholder",
width: 200,
filter: true,
selectAll: false,
onClick: function(view) {
var $checkboxes = $multiSel.next().find("input[type='checkbox']").not(":checked");
var selectedLen = $multiSel.multipleSelect('getSelects').length;
if (selectedLen >= limit) {
$checkboxes.prop("disabled", true);
} else {
$checkboxes.prop("disabled", false);
}
}
});

add change event for select and check for length of selected options
$("select").change(function () {
if($("select option:selected").length > 3) {
// you can disable rest of the things here
}
});

You could do
if($("select").multipleSelect("getSelects").length > 3)
{
alert('Not allowed');
}

JQuery check multiple Selects value

I have a number of HTML selects like follows on one page:
<div>
<h3>Ethnicity</h3>
<select>
<option value="select">Select</option>
<option value="african">African</option>
<option value="africanamerican">African American</option>
<option value="asian">Asian</option>
</select>
</div>
I want to use Jquery to check each select to ensure the initial value "select" has been changed - eg: another options has been selected. If it hasn't changed I want to change the selects color.
I've tried the following Jquery but it's not fully functional:
if($('select').val() == 'select') {
alert('got one...');
$(this).css({'color' : 'red'});
}
Note: the page has around 25 selects and I'm try to get one piece of jquery to cover all.

You can use change event handler and check for selected value: Check the snippet below
$('select').on('change', function() {
if ($(this).val() == 'select') {
alert('got one...');
$(this).css({
'color': 'red'
});
} else {
$(this).css({
'color': 'initial'
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h3>Ethnicity</h3>
<select>
<option value="select">Select</option>
<option value="african">African</option>
<option value="africanamerican">African American</option>
<option value="asian">Asian</option>
</select>
</div>

check out this: .val()
$("select").each(function(){
if($(this).val() == "YourDefaulValue"){
$(this).css({'color' : 'red'});
}
});

You have to iterate the elements yourself. Luckily, it's quite simple and a very small change to your code:
$('select').each(function() {
var $this = $(this);
if($this.val() == 'select') {
// probably shouldn't alert here...
// alert('got one...');
$this.css({'color' : 'red'});
}
}

If you need to check all selects you have to test if one or more is "unselected". To achieve this you may do:
$(function () {
$('#resetBtn').on('click', function(e) {
$('select').each(function(index, element) {
$(this).css({'color' : 'black'});
});
});
$('#checkBtn').on('click', function(e) {
$('select').each(function(index, element) {
if (element.selectedIndex == 0) {
alert('got one...');
$(this).css({'color' : 'red'});
}
});
});
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<button id="checkBtn">Check select</button>
<button id="resetBtn">Reset select</button>
<div>
<h3>Ethnicity</h3>
<select>
<option value="select">Select</option>
<option value="african">African</option>
<option value="africanamerican">African American</option>
<option value="asian">Asian</option>
</select>
</div>

Check whether both of the multiselect dropdown is selected

i am creating two dropsdowns like this
var drp_nt = $('<select />', {
'id' : 'drp_' + nt,
'name' : 'drp_' + nt+'[]',
on: {
change: check_data
},
'multiple': true});
var drp_cnt = $('<select />', {
'id' : 'drp_' + cnt,
'name' : 'drp_' + cnt+'[]',
on: {
change: check_data
},
'multiple': true});
Now i am defining the check_data_function like this
function check_data()
{
if($("select option:selected").length==2)
alert('Two Dropdown Selected');
else
alert($("select option:selected").length);
}
I want to enable a button when both of the dropdown has some of the options selected.
in the above fragment of the code, the problem is, if i select 2 options from dropdown drp_nt, and select no option from drp_cnt, then also the alert 'Two Dropdown Selected' is taking place.
I want to have the alert 'Two Dropdown Selected' take place when both of the dropdowns will have some options selected. If one is having something selected while the other one don't, then the alert 'Two Dropdown Selected' won't take place
How can i achieve this?

This will do the trick:
function check_data() {
if ($('select option:selected').parent().length == 2) {
alert('Two Dropdown Selected');
}
}
The idea is that you still select selected options, but then you get their parent select elements and verify that there are exactly two of them.
Check the demo below.
$('select').change(check_data);
function check_data() {
if ($('select option:selected').parent().length == 2) {
alert('Two Dropdown Selected');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option>Text 1</option>
<option>Text 2</option>
<option>Text 3</option>
<option>Text 4</option>
</select>
<select multiple>
<option>Text 1</option>
<option>Text 2</option>
<option>Text 3</option>
<option>Text 4</option>
</select>

you are selecting both dropdown in jquery using select
**
function check_data()
{
if($("select option:selected").length==2)
alert('Two Dropdown Selected');
else
alert($("select option:selected").length);
}
**
$('select') will select both dropdown. So when you check in jquery, after you selected two in one drop down, this will give you result as two selected. So you need to check like following
function check_data()
{
if($("#id1 option:selected").length>1 && $("#id2 option:selected").length>1)
alert('Two Dropdown Selected');
else
alert('select any one of the option from both dropdown');
}

You can do this by filtering the list of selects so that you get only those with options selected and then check the length
$(function(){
$(document).on('change','select',function(){
var selectsWithOptionsSelected = $('select').filter(function(){
return $('option:selected',this).length>0;
});
alert(selectsWithOptionsSelected.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select rows="3" multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select rows=3 multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
You may want to fiddle with the selectors to only target the select instances you're interested in, for example you could give them a class and use that in both selectors (select.myClassName)

Use jQuery().each
function check_data()
{
var counter = 0;
jQuery('select').each(function() {
if(jQuery(this).find('option:selected').length == 2) {
counter++;
}
});
if(counter == jQuery('select').length)
alert('Two Dropdown Selected');
else
alert($("select option:selected").length);
}

Here's another alternative just for giggles:
function check_data() {
$('select:has(option:selected)').length > 1 && alert('Foo');
}

append button value or remove it from a div when it is checked / unchecked

Please take a look at this fiddle
I got the jQueryui multiselect from this site. I have trouble finding the correct selector to append the button's value to a div area when it is checked and remove it when it's unchecked. According to the documentation, I need to use click function to check if an option is checked. Here is a normal demo that shows how appending text is supposed to work. Any help would be appreciated.
Failed Script:
var post_text = $('#post_text');
$("select").multiselect({
selectedText: "# of # selected",
click: function(event, ui){
if($(this).find('input').is('.checked'))
{
post_text.append(ui.value);
}
else
{
post_text.remove(ui.value);
}
}
});
HTML:
<select multiple>
<option value="A">Option 1</option>
<option value="B">Option 2</option>
<option value="C">Option 3</option>
<option value="D">Option 4</option>
<option value="E">Option 5</option>
<option value="F">Option 6</option>
</select>
<div id="post_text"></div>

You cannot remove text using remove(), you need a element for that. I have added <span> in this case.
Try the below code,
var post_text = $('#post_text');
$("select").multiselect({
selectedText: "# of # selected",
click: function (event, ui) {
ui.checked
? post_text.append('<span>' + ui.value + '</span>')
: $('span:contains('+ui.value+')').remove();
}
});
DEMO

Use
$("select").multiselect({
selectedText: "# of # selected",
click: function (event, ui) {
if (ui.checked) { //Use ui.checked
var span = '<div id="' + ui.value + '">'+ ui.text +'</div>'; //create div/span for easy access
post_text.append(span); //append it
} else {
post_text.find('#'+ui.value).remove(); //remove based on ui-value
}
}
});
DEMO

jQuery how to show/hide Select by Select

I need some help with my jquery script.
I have two select boxes. When I select one options from firs select box the second box should show 3 items from all available options. The script doing it, but also showing me "additional" value at the top of the second select box.
Can someone tell me why?
Here is my HMTL code:
<select id="viewSelector" style="float: left;">
<option value="0">-- Select a View --</option>
<option value="view1">W</option>
<option value="view2">X</option>
<option value="view3">Y</option>
<option value="view4">Z</option>
</select>
<select id="viewSelect1">
<option id="view1a">W1</option>
<option id="view1b">W2</option>
<option id="view1c">W3</option>
<option id="view2a">X1</option>
<option id="view2b">X2</option>
<option id="view2c">X3</option>
<option id="view3a">Y1</option>
<option id="view3b">Y2</option>
<option id="view3c">Y3</option>
<option id="view4a">Z1</option>
<option id="view4b">Z2</option>
<option id="view4c">Z3</option>
</select>
Here is my jQuery/JavaScript:
$(document).ready(function() {
$.viewMap = {
'0' : $([]),
'view1' : $('#view1a, #view1b, #view1c'),
'view2' : $('#view2a, #view2b, #view2c'),
'view3' : $('#view3a, #view3b, #view3c'),
'view4' : $('#view4a, #view4b, #view4c'),
};
$.each($.viewMap, function() { this.hide(); });
$('#viewSelect1').hide();
$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
$('#viewSelect1').hide();
// show current
$.viewMap[$(this).val()].show();
$('#viewSelect1').show();
});
});​
The working example you can find here: http://jsfiddle.net/amarcinkowski/Sg8Xf/9/

Simple get id of selected value and add attribute selected .
var id = $.viewMap[$(this).val()].attr("id");
$('#'+id).attr('selected', 'selected');
$(document).ready(function() {
$.viewMap = {
'0' : $([]),
'view1' : $('#view1a, #view1b, #view1c'),
'view2' : $('#view2a, #view2b, #view2c'),
'view3' : $('#view3a, #view3b, #view3c'),
'view4' : $('#view4a, #view4b, #view4c'),
};
$.each($.viewMap, function() { this.hide(); });
$('#viewSelect1').hide();
$('#viewSelector').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
$('#viewSelect1').hide();
// show current
$.viewMap[$(this).val()].show();
$('#viewSelect1').show();
var id = $.viewMap[$(this).val()].attr("id");
$('#'+id).attr('selected', 'selected');
});
});

Edited here is a working jsFiddle example
added
<option id="view0">Select</option>
to
<select id="viewSelect1">
....
</select>
modified your object
$.viewMap = {
'0' : $([]),
'view1' : $('#view1a, #view1b, #view1c'),
'view2' : $('#view2a, #view2b, #view2c'),
'view3' : $('#view3a, #view3b, #view3c'),
'view4' : $('#view4a, #view4b, #view4c'),
'viewBlank' : $("#view0")
};
and added a line
// show current
$.viewMap[$(this).val()].show();
$.viewMap['viewBlank'].show();
$('#viewSelect1').show();

Change
$('#viewSelect1').show()
to
$('#viewSelect1')
.show()
.find('option:visible:first') // get the first visible option
.attr('selected', 'selected'); // set that option as selected
Demo
According to comment
$('#viewSelector').change(function() {
var str = $('#viewSelect1 option:selected').attr('id').replace(/view\d/,'');
// hide all
$.each($.viewMap, function() {
this.hide();
});
$('#viewSelect1').hide();
// show current
$.viewMap[$(this).val()].show();
$('#viewSelect1')
.show()
.find('option:visible[id*='+ str+']')
.attr('selected', 'selected');
});
DEMO