0

当我单击链接时，它将显示一个弹出窗口（Twitter Bootstrap），其中我有一个名为国家的选择字段，当我选择美国时，它将在另一个选择字段中自动填充美国的所有州，否则它将显示一个文本字段。

当我第一次单击链接时，它正在工作，关闭后，当我第二次单击链接时，脚本没有被加载。

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

这是脚本：

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

4 回答 4

1

you might need this:

<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

于 2013-08-27T11:08:27.470 回答
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();
     }
   });
});
于 2013-08-27T10:58:24.817 回答
0

假设您正在尝试触发更改选择框的功能

 $("#job_country").change(function() {
    $a = $(this).val();
    if ($a == "United States") {
      $("#job_state").show();
      $(".text_state").hide();
    }
    else
    {
      $("#job_state").hide();
      $(".text_state").show();
    }
    });
于 2013-08-27T10:59:00.757 回答
0

尝试这个，

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

 $(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();
         }
       });
    });
于 2013-08-27T11:01:08.963 回答