Question

当我点击链接时，它会显示一个弹出窗口（Twitter Bootstrap），并且我有一个名为country的选择字段，当我选择US时，它将自动填充另一个选择中的US的所有状态字段，否则它将显示文本字段。

当我第一次点击链接，关闭后以及第二次单击链接时，脚本没有被加载。

我不知道原因，请帮帮我。

这是脚本：

div class="row-fluid">
<div class="span4">
  <%= f.label :Country %>
  <%= country_select("job", "country",[], :include_blank => "Select country") %>
</div>
<div class="span4">  
  <%= label_tag "State"%>
  <%= f.select :state, options_for_select(Contact::STATES) %>
  <%= text_field_tag "state_name", "", :class => "text_state"%>
</div>
<div class="span4"> 
  <%= label_tag "City"%>
  <%= f.text_field :city %>
</div>
</div><br/>

<script>

$("#job_country").click(function() {
$a = $("#job_country option:selected").text();
if ($a == "United States") {
  $("#job_state").show();
  $(".text_state").hide();
}
else
{
  $("#job_state").hide();
  $(".text_state").show();
}
});
});  
</script>

Answer 1

我认为job_country是一个选择，尝试将事件从click()更改为change()。

使用$(this).val()从您的选择中获取值

将您的脚本插入document.ready()

试试这个：

$(document).ready(function(){
  $("#job_country").change(function() {
     $a = $(this).val();
     if ($a == "United States") {
       $("#job_state").show();
       $(".text_state").hide();
     }
     else
     {
       $("#job_state").hide();
       $(".text_state").show();
     }
   });
});

Answer 2

你可能需要这个：

<select id="job_country">
  <option value="United States">UnitedStates</option>
  <option value="Europe">Europe</option>
  <option value="other" selected>Other</option>
</select>
<br>
<select id="job_state" style="display:none">
  <option value="Newyork">Newyork</option>
  <option value="Losangles">Losangles</option>
  <option value="other" selected>Other</option>
</select>

<input type="text" class='text_state' value="Please type state name.">
<script>
$("#job_country").change(function () {
    var a = $("#job_country option:selected").val();
    //alert(a);

    if (a == "United States") {
        $("#job_state").show();
        $(".text_state").hide();
    } else {
        $("#job_state").hide();
        $(".text_state").show();
    }

});
</script>

jsfiddle：http://jsfiddle.net/A7JBx/1

Answer 3

假设您尝试在更改选择框时触发该功能

 $("#job_country").change(function() {
    $a = $(this).val();
    if ($a == "United States") {
      $("#job_state").show();
      $(".text_state").hide();
    }
    else
    {
      $("#job_state").hide();
      $(".text_state").show();
    }
    });

Answer 4

试试这个，

如果您尝试触发事件，则在弹出加载后，单击事件

失败

 $(document).ready(function(){
      $('body').on('click','#job_country'function() {
         $a = $(this).val();
         if ($a == "United States") {
           $("#job_state").show();
           $(".text_state").hide();
         }
         else
         {
           $("#job_state").hide();
           $(".text_state").show();
         }
       });
    });

jQuery脚本问题（第二次点击时不工作）

4 个答案: