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
– Rajaprabhu Aravindasamy, Commented Jul 17, 2014 at 5:05
means you want if any of '32' '45' 67' 89' 122' is equal to val then it should hide. am I right? — Mritunjay
– Mritunjay, Commented Jul 17, 2014 at 5:07
I've given an answer based on what I do for these kind of situations — Mritunjay
– Mritunjay, Commented Jul 17, 2014 at 5:26

Sudharsan S · Accepted Answer · 2014-07-17 05:44:15Z

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, 2014 at 5:44

answered Jul 17, 2014 at 5:06

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rajaprabhu Aravindasamy Over a year ago

$(this).find("option:selection").val(); === this.value

Donoma Pak Over a year ago

@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?

Sudharsan S Over a year ago

Just add one line before it - $('#photo-upload').show();

Mritunjay · Accepted Answer · 2014-07-17 05:09:07Z

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, 2014 at 5:09

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2014-07-17 05:19:38Z

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, 2014 at 5:19

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

1 Comment

Donoma Pak Over a year ago

i also tried this but didnt work, could you check my html maybe my html is dfferent hers the fiddle jsfiddle.net/Bk54E

Community · Accepted Answer · 2017-05-23 12:21:25Z

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?

Balachandran · Accepted Answer · 2014-07-17 06:01:45Z

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, 2014 at 6:01

answered Jul 17, 2014 at 5:07

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

2 Comments

Donoma Pak Over a year ago

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 Over a year ago

Thank this works on your demo but in mine it dont, my options are like this <option value="32">OPTION NAME HERE</option> Is this making the problem? Thanks for your support

Collectives™ on Stack Overflow

how to add mutiple values to jquery code

5 Answers 5

3 Comments

Comments

1 Comment

Comments

DEMO

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related