CODEWITHSUNDEEP
jquery
SaberTooth
SaberTooth

Reputation: 75

make show/hide work with jquery

I am using the following code to make the jquery show/hide but somehow it is not working, not even alert is shown in this 

<div class="col-md-3 clr">
          <label class="clr">License Type</label>
          <div class="clr">
            <select name="licenseType" id="licenseType" multiple>
              <option value="Truck License">Truck License</option>
              <option value="Car License" selected>Car Licence</option>
              <option value="Two Wheeler">Two Wheeler</option>
              <option value="Four Wheeler">Four Wheeler</option>
              <option value="Six Wheeler">Six Wheeler</option>
              <option value="Eight Wheeler">Eight Wheeler</option>
              <option value="Special License" class="special">Special License</option>
              <option value="Machine Operator License" class="machine">Machine Operator License</option>
            </select>
          </div>
        </div>
        <div class="col-md-9 clr specialLicense">
          <label class="clr">Special Machine Operator Licence Number & Type</label>
          <div class="clr">
            <input type="text" name="licenceSpecialMachine" id="licenceSpecialMachine" placeholder="Special Machine Operator Licence Number" class="form-control" />
          </div>
        </div>

JS Code 

 $(".specialLicense").hide();
    $('select[class="special"]').click(function(){
        alert("hi");
        $(".specialLicense").toggle('slow');
    });

Upvotes: 0

Views: 46

Answers (4)

showdev
showdev

Reputation: 29168

As @RashminJaviya mentioned, it's important to perform your jQuery after the DOM has loaded. (Alternatively you can delegate your event listener.)

Also, I recommend using change() to detect any change to the select list, rather than click() to detect a click on any option.

It seems that you want a field to show when a particular option is selected, and that you want the field to hide when any other option is selected.

Here, I am using $('option:selected',this).hasClass('special') to test the class (special) of the selected option (option:selected) in the select list (this).

$('select#licenseType').change(function () {

    /* the selection has changed */

    if ($('option:selected', this).hasClass('special')) {

        /* the selected option has a class of "special" */
        $(".specialLicense").show('slow');

    } else {

        /* the selected option does NOT have a class of "special" */
        $(".specialLicense").hide('fast');

    }

});

Working Example

Upvotes: 0

Rashmin Javiya
Rashmin Javiya

Reputation: 5222

Wrap code in document.ready and use select option.special selector to bind click event

DEMO

$(document).ready(function(){
    $(".specialLicense").hide();
    $('select option.special').click(function(){
        alert("hi");
        $(".specialLicense").toggle('slow');
    });
});

Upvotes: 0

j08691
j08691

Reputation: 207861

Provided your code is within a document ready call, or at the end of the document, this works:

$(".specialLicense").hide();
$('select option.special').click(function () {
    alert("hi");
    $(".specialLicense").toggle('slow');
});

jsFiddle example

you wanted $('select option.special').click(function () {, not $('select[class="special"]').click(function(){.

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

You're currently selecting the select html element, with the class of special. For this to work, you need to have an HTML like this

<select class="special">

But you don't have that type of HTML. So you need this code instead

$('select option.special').click(function(){

You need to select the option with the special class. This would select the event to be triggered if the option with that class is clicked.

Upvotes: 0

Related Questions