how to add mutiple values to jquery code

Question

I have created the code to show a div only once a category is selected from a dropdown, I have made the div display:none in css and showed it in jquery using this code and its working,

$(' select[name=catId]').change(function(e){
      if ($(' select[name=catId]').val() == '32'){
        $('#photo-upload').hide();
      }else{
        $('#photo-upload').show();
      }
    });

But this way its working for the option value 32 , but i want it to work for many values, I have tried like this but it dont work

 $(' select[name=catId]').change(function(e){
          if ($(' select[name=catId]').val() == '32' '45' 67' 89' 122'){
            $('#photo-upload').hide();
          }else{
            $('#photo-upload').show();
          }
        });

Please guide me on how to make it hide for the other values too not just 32 , now its working for me for just one value.

UPDATE: This is my html structure

<select name="catId" id="catId">
    <option value="1">England</option>
    <option value="2">Russia</option>
    <option value="3">Antartika</option>
    <option value="4">Maldives</option>
    <option value="32">Alaska</option>
    <option value="45">Seychelles</option>
    <option value="67">Georgia</option>
    <option value="89">Honduras</option>
    <option value="7">Lebanon</option>
    <option value="8">Switzerland</option>
    <option value="122">Germany</option>
</select>
<div id="photo-upload">photo uploader here</div>

Here is the fidlle demo: http://jsfiddle.net/Bk54E/

Show us the html structure.. And provide some more useful info regarding your question.. Because it seems unclear.. — Rajaprabhu Aravindasamy, Jul 17 '14 at 05:05
means you want if any of `'32' '45' 67' 89' 122'` is equal to val then it should hide. am I right? — Mritunjay, Jul 17 '14 at 05:07
I've given an answer based on what I do for these kind of situations — Mritunjay, Jul 17 '14 at 05:26

Sudharsan S · Accepted Answer · 2014-07-17T05:44:15.747

1

Use OR operator like this

$("select[name='catId']").change(function(e){

    var res = $(this).find("option:selected").val() ;

    if (res == '32' || res == '45' || res == '67' || res == '89' || res == '122'){

         $('#photo-upload').hide();

      }else{

          $('#photo-upload').show();

      }
 });

Fiddle

edited Jul 17 '14 at 05:44

answered Jul 17 '14 at 05:06

Sudharsan S

15,336
3
31
49

`$(this).find("option:selection").val();` === `this.value` – Rajaprabhu Aravindasamy Jul 17 '14 at 05:11
@sudharsan this worked perfectly! one small problem - now when i the page load the photo uploader is not showing even tough its set to england option value"1" which should show it, any idea how can i make it show even when the page is first loaded? – Donoma Pak Jul 17 '14 at 05:48
Just add one line before it - $('#photo-upload').show(); – Sudharsan S Jul 17 '14 at 05:53

Balachandran · Answer 2 · 2014-07-17T06:01:45.523

0

use

use inArray in jquery

$.inArray( $(' select[name=catId]').val(), [ '32', '45', '67', '89', '122' ] );

OR

 $.inArray( this.value , [ '32', '45', '67', '89', '122' ] );

Your JS code will be look

$("select[name='catId']").change(function(){
       if( $.inArray(this.value, ['32', '45', '67', '89', '122' ] )!=-1){
            $('#photo-upload').hide();
          }else{
            $('#photo-upload').show();
          }
        });

DEMO

edited Jul 17 '14 at 06:01

answered Jul 17 '14 at 05:07

Balachandran

9,567
1
16
26

Thank for the answer , im new to jquery, can you write me this code integrated with mine, because im not sure where to add it – Donoma Pak Jul 17 '14 at 05:10
Thank this works on your demo but in mine it dont, my options are like this Is this making the problem? Thanks for your support – Donoma Pak Jul 17 '14 at 05:31

score 0 · Answer 3 · answered Jul 17 '14 at 05:09

0

Better use something like this.

if(['32', '45', '67', '89', '122'].indexOf($(' select[name=catId]').val())>-1){
     //hide
}

So basically if any of these will be equal to select's value condition will be true.

answered Jul 17 '14 at 05:09

Mritunjay

25,338
7
55
68

score 0 · Answer 4 · answered Jul 17 '14 at 05:19

0

You can use like this:

var selValue = ['32', '45', '67', '89', '122'];

if ($(' select[name=catId]').val() == $.inArray(this.value, selValue){

answered Jul 17 '14 at 05:19

Bhojendra Rauniyar

83,432
35
168
231

i also tried this but didnt work, could you check my html maybe my html is dfferent hers the fiddle http://jsfiddle.net/Bk54E/ – Donoma Pak Jul 17 '14 at 05:41

score 0 · Answer 5 · edited May 23 '17 at 12:21

You can try this inArray in jquery built in function

<html>
    <body>

        <select name="category">
          <option value="31">Volvo</option>
          <option value="32">Saab</option>
          <option value="33">Mercedes</option>
          <option value="34">Audi</option>
        </select> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </body>
<html>

    <script>
    $(document).ready(function(){

        var category1 =[31,32];
        var category2 =['33'];
        var category3 =['34']
        $('select[name=category]').change(function(){

            var selectedValue = $('select[name=category]').val();
            if($.inArray(selectedValue,category1) != -1)  {
                alert('hey u have selected category 1');
            }else if($.inArray(selectedValue,category2) != -1)  {
                alert('hey u have selected category 2');
            }else if($.inArray(selectedValue,category3) != -1)  {
                alert('hey u have selected category 3');
            }else{
                alert('invalid category');
            }

        });

    });
    </script>

For more information on array manipulation please get in over here How do I check if an array includes an object in JavaScript?

how to add mutiple values to jquery code

5 Answers5

DEMO