CODEWITHSUNDEEP
jqueryformshtml-select
Tomate
Tomate

Reputation: 308

Change the properties of a <div> with <select> options with jquery

I want to change the visibility of divs depending on the option selected in a dropdown menu, I thought something like this would work

<select>
<option onclick="hideButton();" value="A">A</option>
<option onclick="showButton();" value="B">B</option>
<option onclick="showButton();" value="C">C</option>
</select>

I have one button that I want to change the visibility of 

<input class="button" name="button" type="submit" value="delete" />

<script type="text/javascript"> 
function hideButton(){$(".button").hide("slow");}
function showButton(){$(".button").show("slow");} 
</script>

of course it does nothing and I've no idea why, I thought the theory was sound but I just don't know enough about jquery

Upvotes: 1

Views: 342

Answers (3)

andres descalzo
andres descalzo

Reputation: 14967

you can decide on the option that action has to take:

Html:

<select>
   <option data-visibility="hide" value="A">A</option>
   <option data-visibility="show" value="B">B</option>
   <option data-visibility="show" value="C">C</option>
</select>

Js (jQuery):

$('select').bind('change', function(event) {

    var method = $(this).find('option:selected').data('visibility');
    $('.button')[method]('slow');

});

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

Check FIDDLE

    $(function() {
        $('select').on('change', function() {

            if ($(this).val() == 'A') {
                $('.button').hide('slow');
            }
            else {
                $('.button').show('slow');
            }
        }).change();
    });​

<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<input class="button" name="button" type="submit" value="delete" />

Upvotes: 0

user1695032
user1695032

Reputation: 1142

Try this:

  $('select').change(function(){
    if($(this).val() == 'A'){
      hideButton();
    }else{
      showButton();
    }
  })

Upvotes: 1

Related Questions