jQuery：如果选择了特定的 <select> 选项，则显示 div？答案

【问题标题】：jQuery: Showing a div if a specific a <select> option is selected?jQuery：如果选择了特定的 <select> 选项，则显示 div？
【发布时间】：2010-11-10 04:43:03
【问题描述】：

我正在处理购物车的地址页面。有 2 个<select> 框，1 个用于 Country，1 个用于 Region。

有 6 个标准国家可用，否则用户必须选择“其他国家”。 <option> 元素都有一个数值——Other Country 是 241。如果用户选择 Other Country，我需要做的是隐藏 Region <select>，并显示一个文本区域。

非常感谢任何帮助！

【问题讨论】：

标签： javascript jquery forms select option

【解决方案1】：

您需要将一个函数绑定到选择列表，以便当它更改时，您的函数决定是否应该显示 div。像这样的东西（~~未经测试，希望在语法上接近~~）。 这是live example。

$(document).ready( function() {
  $('#YourSelectList').bind('change', function (e) { 
    if( $('#YourSelectList').val() == 241) {
      $('#OtherDiv').show();
    }
    else{
      $('#OtherDiv').hide();
    }         
  });
});

【讨论】：

传奇！这给了我基本的轮廓，我能够从那里弄清楚。感谢您的时间，以及您编写的示例 - 非常感谢！ :)

【解决方案2】：

原理和this question一样。您只需要连接到 select 上的更改，检查 val() 和 hide()/show() 的 div。

【讨论】：

【解决方案3】：

在我看来，您实际上并不需要 jQuery。

这个简单的 JavaScript 代码就可以解决问题：

document.getElementById('country_id').onchange = function()
{
    if (this.options[this.selectedIndex].value == 241) {
        document.getElementById('region_id').style.display = 'block';
    } else {
        document.getElementById('region_id').style.display = 'none';
    }
}

value 适用于大多数浏览器，但是是的，对于较旧的浏览器，您需要select.options[select.selectedIndex].value。我更新了我的脚本。

【讨论】：

尚未对此进行测试，因为我最终使用了其他解决方案，但感谢您的意见 - 谢谢！
差不多了——你需要索引到 select 以获取所选选项的值。我同意如果你不使用 jquery，这个问题就不是开始的好理由。但是，如果您已经在项目中安装了 jquery，请继续使用它！