javascript - Onchange - 从原型(prototype)切换到 jquery？

Question

有没有办法让 onchange 与 jquery 一起工作？现在我正在使用 prototype.js。 onchange 所做的是当选择 US、CA 或 GB 时，它会显示状态下拉框。基本上是一个显示/隐藏

<SELECT id='country' onchange="HandleStateApearence(this.selectedIndex, 
null, $('state_'), $('state_3'), $('state_2'), 
null, 1, 2, false)" name=add[country]>

    <OPTION value="" selected>-- Select Country --</OPTION>
    <OPTION value=US>United States</OPTION>
    <OPTION value=CA>Canada</OPTION>
    <OPTION value=GB>United Kingdom</OPTION>
    </SELECT>

    <span id='state_' style="display:none; font-weight:bold;">State:</span> 
    <SELECT id=state_2 style="DISPLAY: none" name="c_state">
    <OPTION value="" selected>-- Select Province --</OPTION>
    <OPTION value=AB>Alberta</OPTION>
    <OPTION value="BC">British Columbia</OPTION>
    </SELECT>

    <SELECT id=state_3 style="DISPLAY: none" name="u_state">
    <OPTION value="" selected>-- Select State --</OPTION>
    <OPTION value=AL>Alabama</OPTION>
    <OPTION value=AK>Alaska</OPTION>
    <OPTION value=AZ>Arizona</OPTION>
    </SELECT>

Answer 1

您还没有显示 HandleStateAppearence() 的定义，所以我不确定它的参数的预期类型是什么，但是在 jQuery 中 $('someselectorhere') 函数返回一个 jQuery 对象，您可以将其视为与选择器匹配的数组元素(可能是一个空数组，但您的情况并非如此)。此外，要按 ID 选择元素，您可以使用“#”，例如 $('#state_') - jQuery 选择器(大部分)遵循 CSS 选择器的语法。

所以将这两点放在一起，如果您的函数期望直接引用您需要说的选择元素 $('#state_')[0]:

<SELECT id='country' onchange="HandleStateApearence(this.selectedIndex, null,
         $('#state_')[0], $('#state_3')[0], $('#state_2')[0], null, 1, 2, false)"
         name=add[country]>

编辑:这是一个完整的基于 jQuery 的方法来处理适用状态选择元素的显示/隐藏。

<script>    
$(document).ready(function() {

   $("#country").change(function() {
      $(".state").hide();

      var stateSelect = $("#state_" + $(this).val());

      if (stateSelect.length === 0)
         $("#state_label").hide();
      else {
         $("#state_label").show();
         stateSelect.show();
      }       
   });    
}); 
</script>

<SELECT id='country' name=add[country]>    
   <OPTION value="" selected>-- Select Country --</OPTION>
   <OPTION value=US>United States</OPTION>
   <OPTION value=CA>Canada</OPTION>
   <OPTION value=GB>United Kingdom</OPTION>
</SELECT>
<span id='state_label' style="display:none; font-weight:bold;">State:</span> 
<SELECT id="state_CA" class="state" style="DISPLAY: none" name="c_state">
   <OPTION value="" selected>-- Select Province --</OPTION>
   <OPTION value=AB>Alberta</OPTION>
   <OPTION value="BC">British Columbia</OPTION>
</SELECT>
<SELECT id="state_US" class="state" style="DISPLAY: none" name="u_state">
   <OPTION value="" selected>-- Select State --</OPTION>
   <OPTION value=AL>Alabama</OPTION>
   <OPTION value=AK>Alaska</OPTION>
   <OPTION value=AZ>Arizona</OPTION>
</SELECT>

我删除了内联 onchange 处理程序，而是通过 jQuery 分配更改处理程序，在 document.ready 处理程序内部完成，这样我们就可以确定国家元素已经被解析。这是分配事件处理程序的标准方法。

在您的 html 中，我为每个状态选择元素提供了一个“状态”类，以便我们可以轻松地一次性选择它们，并通过一条语句隐藏它们。

我还将选择元素的 ID 属性更改为“state_{countrycode}”，例如“state_CA”，其中代码与国家选项元素中的相应值完全匹配。这样我们就可以通过将当前选择的国家/地区代码连接到“state_”的末尾来在 JavaScript 中引用它们，如果您稍后将更多国家/地区添加到列表中并使用它们自己相应的状态下拉列表，则无需更改 JavaScript全部。最重要的代码行可能是这一行:

var stateSelect = $("#state_" + $(this).val());

它声明了一个变量 stateSelect，该变量将分配给一个 jQuery 对象，该对象包含与元素 ID 为“state_{currentcountrycode}”的选择器匹配的所有元素。根据选择的国家/地区选项，stateSelect jQuery 对象将恰好包含 0 个或 1 个元素，因此我随后测试对象的长度，如果它是 0，我隐藏状态标签(我更改了它的 ID也是，为了更具描述性)，或者如果长度为 1，我将显示状态标签和选择元素。