CODEWITHSUNDEEP
jqueryhtml-selectonchange
dashard
dashard

Reputation: 897

Call a function when a particular select option is chosen

I have two select menus requesting

  1. a resident's building number and
  2. their apartment number

If the visitor chooses the last item of either menu (both have the same value, text and class), I want to call a function that hides the form from them and displays a message.

The function is working fine as it's also invoked via a standalone link that a non-resident would potentially click: (Don't live here?)

What I can't make work is having the select's change() event call the function if and when that last option is selected.

Here's a brief version of my select code:

<form id="document-request" name="document-request" class="clearfix">
    <label>Your Full Name:
        <input type="text" name="fullname" value="" class="span12"
        required>
    </label>
    <label>Your Email:
        <input type="text" name="email" value="" class="span12 email"
        required>
    </label>
    <label for="building">Your Bldg &amp; Apt#:</label>
    <select name="building" class="span2" required>
        <optgroup label="Building">
            <option value="" name="building">--</option>
            <option value="1" name="building">1</option>
            <option value="2" name="building">2</option>
            <option value="3" name="building">3</option>
            <option value="4" name="building">4</option>
            <option value="5" name="building">5</option>
            <option value="6" name="building">6</option>
            <option value="7" name="building">7</option>
        </optgroup>
        <option value="nonresident" name="building" class="dontlivehere">I Don’t Live Here</option>
    </select>

and here's the jQuery:

$('#document-request select').change(function () {
    var theValue = $(this).child('option:selected').text();
    if ((theValue).contains('Live Here')) {
        residenceAlert();
    }
});

I have also tried to accomplish this by acting on the value as well as the class.
I don't really need that dontlivehere class, it's just part of me trying to find a solution.

The sample page-in-progress can be found here

Upvotes: 1

Views: 9267

Answers (5)

Nope
Nope

Reputation: 22339

The browser debugger console will show you the following error:

Uncaught TypeError: Object [object Object] has no method 'child'

child() is not a jQuery method.

Change that to find() for example.

After replacing child() with find(), the next error you can get, depending on your browser is:

Uncaught TypeError: Object has no method 'contains'

string.contains() is only supported by FireFox, using indexOf() instead might be better, unless off course you don't need to support any other browser.

Your complete code could look similar to:

$('select').change(function () {
    var theValue = $(this).find('option:selected').text();
    if (theValue.indexOf('Live Here')) {
        residenceAlert();
    }
});

DEMO - Using .find() and indexOf()

Upvotes: 1

Rusty Jeans
Rusty Jeans

Reputation: 1426

.child() is not a valid jQuery function, try .find()

var theValue = $(this).find('option:selected').text();

I would probabaly just use something like this:

if ($(this).find('option:selected').val() === 'nonresident') {
    residenceAlert();
}

Upvotes: 4

sbr
sbr

Reputation: 4843

2 issues:

1) child method.

2) contains method.

var theValue = $(this).find('option:selected').text();
if( theValue.indexOf('Dont Live Here') >= 0){
    residenceAlert()
}

Upvotes: 0

Iwo Kucharski
Iwo Kucharski

Reputation: 3825

This works for me:

HTML:

<select id="building" name="building" class="span2" required>
    <optgroup label="Building">
    <option value="" name="building">--</option>
    <option value="1" name="building">1</option>
    <option value="2" name="building">2</option>
    <option value="3" name="building">3</option>
    <option value="4" name="building">4</option>
    <option value="5" name="building">5</option>
    <option value="6" name="building">6</option>
    <option value="7" name="building">7</option>
    </optgroup>  
    <option value="nonresident" name="building" class="dontlivehere">I Don’t Live Here</option>
  </select>

jquery:

$(document).ready(function(){
$('select#building').change(function() {
      var theValue = $('option:selected').text();
        console.log(theValue);
      if ((theValue).contains('Live Here')) {
      alert("it works!");
   }
});
});

Upvotes: 0

nikeaa
nikeaa

Reputation: 1047

Shouldn't this line:

if ((theValue).contains('Live Here')) {

say:

if ((theValue).contains("I Don't Live Here")) {

Upvotes: 0

Related Questions