Develop Reference

How to hide options of jquery choosen dropdownlistbox after clicking on it?

Hi I am developing jquery application. I am trying to hide some of the options of choosen dropdown immediately after clicking on it. I am able to hide option but problem is when i click on drodpownbox i can see all the option and if i select any option then required option will hide. What i want is after clicking on the dropdown immediately before showing options i want to hide.
var checkedValues = [];
$("#<%=gdvRegretletter.ClientID %> tr").each(function () {
if ($(this).closest('tr').find('input[type="checkbox"]').prop('checked', true)) {
checkedValues.push($(this).closest('tr').find('td:eq(2)').text().trim());
}
});
$('.limitedNumbSelect').change(function (e) {
//i want to hide here.
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
alert(val);
//Here i am able to hide.
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
I do not have any idea how to achieve it here. Any help would be appreciated. Thank you.

How to hide or show divs based on checkbox change event

I am trying to show the values based on Checkbox check and uncheck
I have got two checkboxes MNC and Worth (Only the Top Ones), i am trying to show or hide the values based on it (pesent under class pack-panel div)
This is my code
$(document).on('change', '.filtermnc', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.mnccheckbox').prop('checked')
$(this).toggle(visible);
});
});
$(document).on('change', '.filterworth', function() {
$(".pack-panel").each(function () {
var visible = $(this).find('.worthcheckbox').prop('checked')
$(this).toggle(visible);
});
});
When i tried with this code , it is not working and also it is checking all the correspondng checkboxes
Could you please let me know how to achieve this .
http://jsfiddle.net/F8Vk2/121/

I made for one, but it's just a mater of changing the other one likewise:
$(document).on('change', '.filterworth, .filtermnc', function() {
var $this = $(this),
isChecked = $this.is(':checked'),
$packPanel = $('.pack-panel');
isChecked ? $packPanel.show() : $packPanel.hide()
});
You could use this to get the target of the event and verify if it's checked by .is(':checked'). Also, you don't need to iterate over $('.pack-panel') in order to apply your changes. .toggle() will change the visibility by it's previous one, so I think you should hard code to hide or show the panels.

Change your js to
$(document).on('change', '.filtermnc', function() {
var visible = $(this).prop('checked')
if(visible)
$('.mnccheckbox').closest("li").show();
else
$('.mnccheckbox').closest("li").hide();
});
$(document).on('change', '.filterworth', function() {
var visible = $(this).prop('checked')
if(visible)
$('.worthcheckbox').closest("li").show();
else
$('.worthcheckbox').closest("li").hide();
});
http://jsfiddle.net/F8Vk2/123/

You could try ->
$(document).on('change', '.filtermnc', function() {
$('.mnccheckbox').
closest("li").
toggle($(this).prop('checked'));
});
This is basically finding all with .mccheckbox class, and then toggling based on the property of the checkbox you assigned the event too.

On change select, if item has the same value in dropdown check the checkbox

I am creating a dynamic dropdown list out of checkboxes. What I want is when the dropdown changes (on select) I want it to check the checkboxes with the same values or perhaps with the same name? I also want it to do vice versa, if you check a checkbox the select dropdown should change as well.
Here is my codepen - http://codepen.io/BryanBarrera/pen/QEXVxY
I am having issues writing this. Here is what I have. What is the best approach for this? How do I match up elements to change or check the checkboxes?
Any idea or suggestions would be much apprecated
"use strict";
var checkBoxes = $('.form-item'),
checkBox = $('input[type="checkbox"]'),
$select = $('<select></select>').appendTo('body').wrap('<div class="select-dropdown"></div>');
checkBoxes.each(function (n) {
var dataText = $(this).find('label').text();
var dataValue = $(this).find('input').val();
$select.append('<option value="' + dataValue + '">' + dataText + '</option>');
});
$select.on('change', function(){
var checkboxvalue = $(this).val();
var a = $(this).filter(function(){return this.value=='checkboxvalue'});
console.log(a);
console.log(checkboxvalue);
if (checkboxvalue == $(this).val() ) {
// alert('yup');
}
});

This will do the trick:
$select.on('change', function(){
var checkboxvalue = $(this).val();
$('input[value='+checkboxvalue+']').prop('checked', true);
});
checkBox.on('change', function(){
var selectValue = $(this).val();
$select.val(selectValue)
});
You probably want some other function to handle multiple selection, because you dropdown obviosly don't support multiple selection like checkboxes.
Example

You're setting the value of the checkbox element, but not actually checking the box. You also need to do this:
$('#checkbox-selector').prop('checked', true);

Get selected value from COMBO BOX using jQuery

What I'm trying to do is get the selected x-combo-list-item, Partner from the x-combo-list.
How would I do so? Please help. Thank you.
Please refer to my jsfiddle for code reference. --> JSFiddle
----------------New Question------------------
Does .each() automatically run when if "Partner" is selected?

http://jsfiddle.net/littlefyr/H6yeJ/
JQuery allows you to select based on the content of the element. So you simply use selectors to do what you want:
$('.x-combo-list-item:contains("Partner")').click(function() {
var $this = $(this);
alert('You have selected Partner!');
commonFunction($this);
});
$('.x-combo-list-item:not(:contains("Partner"))').click(function() {
var $this = $(this);
alert('You have not selected Partner!');
commonFunction($this);
});
function commonFunction(item){
// do Ajaxy stuff
};
This fails when you start changing the text (like when you have to translate the text). In this case you simply add a constant value to the tags and use attribute selectors:
$('.x-combo-list-item[data-val=pnr]').click(function() {
var $this = $(this);
alert('You have selected Partner attribute wise!');
commonFunction($this);
});
$('.x-combo-list-item[data-val!=pnr]').click(function() {
var $this = $(this);
alert('You have not selected Partner attribute wise!');
commonFunction($this);
});
$('.x-combo-list-item:not([data-val=pnr])').click(function() {
var $this = $(this);
alert('You have not selected Partner alternative attribute wise!');
commonFunction($this);
});
You also can combine those with .x-combo-selected and :not(.x-combo-selected) in order to handle selected items differently.
If you're adding items via code (or even as a matter of principle) you should delegate the events to a relevant ancestor:
$('.x-combo-list-inner')
.on('click', '.x-combo-list-item:contains("Partner")',function() {
var $this = $(this);
alert('You have selected Partner! Again');
commonFunction($this);
}).on('click', '.x-combo-list-item:not(:contains("Partner"))', function() {
var $this = $(this);
alert('You have not selected Partner! again');
commonFunction($this);
})

If I understand correctly, you want to alert when the user clicks on the div which contains the text partner?
$('.x-combo-list-item').click(function() {
if ($(this).text() === "Partner") {
alert('You have selected Partner!');
// Fire your ajax call here
/*
$.post('handler.php', {data: data : {even: 'more data'}}, function(data), 'json');
*/
}
});
You had a call to retrieve data-item which doesn't exist, so I'm not entirely sure.

Try This:
$('#ext-1111 div').each(function() {
if (jQuery(this).html() == "Partner") {
alert("This is Partner")
}
});
Regards

$('id if box').val('Partner') ;
This will do.

How to select other checkbox when the last value is checked

Here an example of my checkbox list http://jsfiddle.net/YnM2f/
Let's say I check on G then A,B,C,D,E,F also automatic checked. How can i achieve my goals with jQuery?

First you need to get all the checkboxes based on which one is clicked. for this you need to get the parent nodes, siblings that are before it. Here is some code that will help you get there, but you'll need to work on it to make it work for you.
http://jsfiddle.net/urau8/
$("input:checkbox").on("click",function(){
if(this.checked)
$(this).parent().prevAll().each(function(){
$("input:checkbox",this).attr("checked",true);
});
});

This will check all checkboxes above a checkboxe that gets checked and uncheck all checkboxes above a checkbox that gets unchecked, given the checkbox layout that you've provided.
$('input:checkbox').click(function () {
var state = $(this).prop('checked');
var elements;
if (state) {
elements = $(this).parent().prevAll();
} else {
elements = $(this).parent().nextAll();
}
elements.each(function () {
$('input:checkbox', this).prop('checked',state);
});
});

$('input:checkbox').change(function(){
var $allParents = $(this).parent();
$allParents.prevAll().find('input').attr('checked', 'checked');
$allParents.nextAll().find('input').removeAttr('checked');
});
Try this

Well it's already been done five times, but this is what I did: http://jsfiddle.net/YnM2f/27/
$('input').click(function(){
if( $(this).is(':checked') ){
$(this).parent('p').prevAll().children('input').attr('checked',true)
}
})

Try something like this: http://jsfiddle.net/YnM2f/16/
It's a very specific solution (as in it will only work with "G"), but it should give you an idea for how to customize this code to meet your needs.
$('input:checkbox').filter(function(){
return (/ G/).test($(this).parent().text())
}).on('change', function() {
var gBox = $(this);
$('input:checkbox').prop('checked', $(gBox).prop('checked'));
});