CODEWITHSUNDEEP
jqueryhtmlcss
Donoma Pak
Donoma Pak

Reputation: 23

how to add mutiple values to jquery code

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/

Upvotes: 2

Views: 58

Answers (5)

Balachandran
Balachandran

Reputation: 9637

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

Upvotes: 0

prem
prem

Reputation: 843

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?

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can use like this:

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

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

Upvotes: 0

Mritunjay
Mritunjay

Reputation: 25892

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.

Upvotes: 0

Related Questions