Combine checkbox value

Question

0.00/5 (No votes)

See more:

I have two multicheckbox dropdown with id #dropdown1,#dropdown2 and json data 'filterdata'.When I change the dropdown values it bind result.I need to combine the two dropdown values and show the result.Sample code is

HTML

<pre lang="JavaScript">$(document).on("change", "#dropdown1", function () {
    var chklist = [];

    $("dropdown1:checked").each(function () {
        var cat = $(this).val();
        chklist.push(cat);

    });

    if (chklist.length != 0) {
        var Filtereditems = $.grep(Filterdata, function (element) {
            return chklist.indexOf(element.val1) > -1;
        });
        if (Filtereditems.length > 0) {
            $.each(Filtereditems, function (i) {
              //bind html data
            });
        } else {
            //clear result
        }
    }

});
$(document).on("change", "#dropdown2", function () {
    var chklist = [];

    $("#dropdown2":checked").each(function () {
        var cat = $(this).val();
        chklist.push(cat);

    });

    if (chklist.length != 0) {
        var Filtereditems = $.grep(Filterdata, function (element) {
            return chklist.indexOf(element.val2) > -1;
        });
        if (Filtereditems.length > 0) {
            $.each(Filtereditems, function (i) {
             //bind html data
            });
        } else {
           // clear result
    }

});

What I have tried:

I can show the result based on individual dropdown values.But i need result based on checked values in both dropdown.

Posted 20-May-16 1:06am

Dil0500

Updated 20-May-16 1:11am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2016-05-20T01:11:00

Solution 1

place the array object outside the event, and remove it from both the events.

JavaScript

var chklist = [];

check this demo: Edit fiddle - JSFiddle[^]

Posted 20-May-16 1:11am

Karthik_Mahalingam

Updated 20-May-16 2:42am

v2

Comments

Dil0500 20-May-16 7:16am

filtereditems is different that based on chklist.

Karthik_Mahalingam 20-May-16 7:21am

try using only one event and combine the code..
on("change", "#dropdown1,#dropdown2", function () {

Dil0500 20-May-16 7:23am

var filterdata is json data

Karthik_Mahalingam 20-May-16 7:29am

seems syntax error [ $("#dropdown2":checked").each(function () { ]

corrected one
$("#dropdown2:checked").each(function () {

Dil0500 20-May-16 7:42am

ok.

Dil0500 20-May-16 7:42am

error occur when i change name

Karthik_Mahalingam 20-May-16 7:45am

the syntax is wrong, correct it.

Dil0500 20-May-16 7:51am

when i post the code I change the names.so that error occur.Its working code.

Karthik_Mahalingam 20-May-16 7:54am

ok. fine
based on the items present in the json array and the items you have selected in both the text box, you are displaying it on the screen rite?

Dil0500 20-May-16 7:59am

yes

Karthik_Mahalingam 20-May-16 8:02am

give some sample data as example and you expected output.

and give some data for Filterdata object

Dil0500 20-May-16 8:15am

var filterdata= {[{"Name":"Name 1","City": "city1"},{ "Name":"Name 2","City": "city2"},{"Name": "Name 3","City": "cat1" }]}
select Name1 show data of Name1 and city1 show same result.but choose city2 no result shown

Karthik_Mahalingam 20-May-16 8:18am

so, dropdown1 for name
and dropdown2 for city ?

Karthik_Mahalingam 20-May-16 8:40am

refer this example and modify your code..

<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="jquery.js"></script>

<script>

var filterdata = [{ "Name": "Name 1", "City": "city1" }, { "Name": "Name 2", "City": "city2" }, { "Name": "Name 3", "City": "city3" }];

$(function () {

$("#dropdown1,#dropdown2").change(function () {

var names = []; var cities = [];
var name = $("#dropdown1").val();
var city = $("#dropdown2").val();
if (name != null)
$(name).each(function (i, e) { names.push(e) });
if (city != null)
$(city).each(function (i, e) { cities.push(e) });

var Filtereditems = $.grep(filterdata, function (element) {
var flagNames = names.indexOf(element.Name) > -1;
var flagCity = cities.indexOf(element.City) > -1;
if (flagNames) return true;
if (flagCity) return true;
return false;

});

$('#ul1 >li').remove();
if (Filtereditems.length > 0) {
$.each(Filtereditems, function (i, obj) {
$('#ul1').append('<li>' + obj.Name + '--' + obj.City + ' </li>');
});
}

});

});
</script>

</head>
<body>

<select id="dropdown1" multiple="multiple">
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
<option value="Name 3">Name 3</option>

</select>

<select id="dropdown2" multiple="multiple">
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="city3">city3</option>

</select>

<ul id="ul1"></ul>

</body>
</html>

Dil0500 20-May-16 8:20am

yes.thats with multiple checkbox

Karthik_Mahalingam 20-May-16 8:43am

check the fiddle link in the solution and try to modify it on your code..
and let me know if it works..
I have used simple html multi select box, in your case its jquery multicheeck box, modify your code accordingly...

Dil0500 23-May-16 9:28am

I modify my code but some concerns occurred .I have four drop down like hotel,category,price,city.I create four array that contain checked drop down list values
var hotel= [];
var category= [];
var price= [];
var city= [];

var Filtereditems = $.grep(Filterdata, function (element) {
return hotel.indexOf(element.Hotel) > -1 && category.indexOf(element.category) > -1&& price.indexOf(element.price) > -1
&& city.indexOf(element.city) > -1;
but it satisfy all items checked.But I want to satisfy checked and unchecked four dropdown conditions?

});

Karthik_Mahalingam 23-May-16 9:30am

similarly implement as i mentioned in the demo link and let me know if u face any issue.

Dil0500 23-May-16 9:40am

but its not working when I copy paste to jsfiddle

Karthik_Mahalingam 23-May-16 9:45am

what is thre in filterdata object

Dil0500 23-May-16 9:47am

could you please share jsfiddle link.

Karthik_Mahalingam 23-May-16 9:50am

you can create your own fiddle
https://jsfiddle.net/

Karthik_Mahalingam 23-May-16 10:04am

try this

<html>
<head>
<script src="jquery.js"></script>
<title></title>
<script>
var filterdata = [{ "Name": "Name 1", "City": "city1", "category": "category 1", "price": '10' }, {
"Name": "Name 2", "City": "city2"
, "category": "category 2", "price": '20'
}, {
"Name": "Name 3", "City": "city3"
, "category": "category 3", "price": '30'
}];

$(function () {

$("#dropdown1,#dropdown2,#dropdown3,#dropdown4").change(function () {

var names = []; var cities = []; var categries = []; var prices = [];
var name = $("#dropdown1").val();
var city = $("#dropdown2").val();
var cat = $("#dropdown3").val();
var price = $("#dropdown4").val();

if (name != null)
$(name).each(function (i, e) { names.push(e) });
if (city != null)
$(city).each(function (i, e) { cities.push(e) });
if (cat != null)
$(cat).each(function (i, e) { categries.push(e) });
if (price != null)
$(price).each(function (i, e) { prices.push(e) });
debugger

var Filtereditems = $.grep(filterdata, function (element) {
var flagNames = names.indexOf(element.Name) > -1;
var flagCity = cities.indexOf(element.City) > -1;
var flagcat = categries.indexOf(element.category) > -1;
var flagprice = prices.indexOf(element.price) > -1;
if (flagNames) return true;
if (flagCity) return true;
if (flagcat) return true;
if (flagprice) return true;
return false;

});

$('#ul1 >li').remove();
if (Filtereditems.length > 0) {
$.each(Filtereditems, function (i, obj) {
$('#ul1').append('<li>' + obj.Name + '--' + obj.City + ' </li>');
});
}

});

});
</script>

</head>
<body>
<select id="dropdown1" multiple="multiple">
<option value="Name 1">Name 1</option>
<option value="Name 2">Name 2</option>
<option value="Name 3">Name 3</option>

</select>

<select id="dropdown2" multiple="multiple">
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="city3">city3</option>

</select>
<select id="dropdown3" multiple="multiple">
<option value="category 1">category 1</option>
<option value="category 2">category 2</option>
<option value="category 3">category 3</option>

</select>
<select id="dropdown4" multiple="multiple">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>

</select>

<ul id="ul1"></ul>
</body>
</html>

Karthik_Mahalingam 23-May-16 10:06am

Select Unselect Items - JSFiddle[^]