jquery - jQuery show() 在特定的下拉选择中

Question

当从下拉框中选择某个值时，我希望使用 jQuery 的 show() 函数显示表单的另一部分。目前，我在标题上方的代码如下所示：

<script>   
    $(":input#location").change(function(){
      if($(this).val() === 'On Rental'){
        $('div#dpo').show("slow");
      }
    }
</script>

而且，表单的编码如下：

<p>
    <strong><label for="location">Location</label></strong>
</p>
<select name="location" id="location">
    <option value="Clarksville">Clarksville</option>
    <!--etc.-->
</select>

<div id="dpo" style="display:none">
  <!--Stuff I want to show here.-->
</div>

出于某种原因，当我从下拉字段中选择“出租时”时，什么也没有发生，而且我终生无法弄清楚我做错了什么。谁能看到我做错了什么？

Answer 1

修剪值并尝试如下，另一件事是如果您使用 id 则无需在选择器中指定标记类型

$("#location").change(function(){ 
      if($.trim($(this).val()) == 'On Rental'){
         $('#dpo').show("slow");
       }
     } 

Answer 2

<script>   
$("input#location").change(function(){
  if($(this).val() === 'On Rental'){
    $('div#dpo').show("slow");
  }
}
</script>

Answer 3

将其包装在 document.ready 函数中。你也可以只使用ID选择器。而且您的选择不是输入类型..

$(function(){
    $("#location").change(function() {
        if ($(this).val() === 'On Rental') {
            $('#dpo').show("slow");
        }
    }​
})

http://jsfiddle.net/wirey00/FYwPv/

Answer 4

我尝试了上面的所有建议（包括将其包装在 document.ready 函数中），但我无法让它工作。当我将代码放在文档底部而不是在标题中时，我最终使代码正常工作（就像我最初拥有的那样）。我对 JavaScript 和 jQuery 知之甚少，不知道为什么会这样……？