选择特定选择选项时调用函数

Question

我有两个选择菜单请求

1. 居民的楼号和
2. 他们的公寓号码

如果访问者选择任一菜单的最后一项（两者都具有相同的value, text 和 class），我想调用一个函数来隐藏表单并显示一条消息。

该函数运行良好，因为它还通过一个非居民可能会点击的独立链接调用：（不住在这里？）

我不能让select 的change() 事件在选择最后一个选项时调用该函数。

这是我的选择代码的简短版本：

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

这是 jQuery：

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

我也尝试通过作用于value 和class 来实现这一点。
我真的不需要 dontlivehere 类，它只是我试图找到解决方案的一部分。

可以在here找到示例页面

Answer 1

这行不应该：

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

说：

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

Answer 2

.child() 不是一个有效的 jQuery 函数，试试.find()

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

我可能会使用这样的东西：

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

Answer 3

这对我有用：

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!");
   }
});
});

Answer 4

2 个问题：

1) 子方法。

2) 包含方法。

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

Answer 5

浏览器调试器控制台将显示以下错误：

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

child() 不是 jQuery 方法。

例如，将其更改为 find()。

将child() 替换为find() 后，您可能会遇到下一个错误，具体取决于您的浏览器：

Uncaught TypeError: Object has no method 'contains' 

string.contains() 仅受 FireFox 支持，使用indexOf() 可能会更好，除非您当然不需要支持任何其他浏览器。

您的完整代码可能类似于：

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

---

DEMO - 使用.find() 和indexOf()

---