javascript - 如何通过Jquery显示多个<options>

Question

我几乎没有使用 Jquery(甚至 Javascript)的经验，但经过一些研究后，我似乎需要它。我有一个 HTML 表单来选择国家和地区，但我需要选择国家/地区来确定填充区域列表的内容。

<select name="search_country" id="scid">
  <option value="">Select a country</option>
  <option value="cyprus">Cyprus</option>
  <option value="turkey">Turkey</option>
  <option value="greece">Greece</option>
</select>
<select name="search_region" id="srid">
  <option value="">Select a region</option>
</select>

浏览此网站后，我发现一些代码几乎完全可以工作，但是当选择一个国家/地区时，只有一个区域(顶部选项)显示在列表中。

$(function(){
 $("#scid").change(function(){
var options = '';
if($(this).val().indexOf('cyprus') > -1) {
    options = '<option value="paphos">Paphos</option>';
              '<option value="larnaca">Larnaca</option>';
              '<option value="nicosia">Nicosia</option>';
              '<option value="agia_napa">Agia Napa</option>';
}
else if ($(this).val().indexOf('turkey') > -1) {
    options = '<option value="ankara">Ankara</option>';
}
    else if ($(this).val().indexOf('greece') > -1) {
    options = '<option value="athens">Athens</option>';
              '<option value="rhodes">Rhodes</option>';
}
$('#srid').html(options); }); });

我该怎么做才能使所有适当的区域在选择国家/地区后填充第二个下拉列表？

谢谢。

Answer 1

从技术上讲，这不是语法错误，但对于您想要完成的任务来说，这是不正确的语法:

options = '<option value="paphos">Paphos</option>';
          '<option value="larnaca">Larnaca</option>';

这是两个单独的声明。通过仅修改空白来更清楚地说明:

options = '<option value="paphos">Paphos</option>';

'<option value="larnaca">Larnaca</option>';

第一个将 options 变量设置为该字符串。第二条语句本身只是一个字符串，没有执行任何操作。因此，在执行这两个语句之后，options 仅被设置为第一个值。

我认为您想要连接您的值:

options = '<option value="paphos">Paphos</option>' +
          '<option value="larnaca">Larnaca</option>';

或者，另一种选择:

options = '<option value="paphos">Paphos</option>';
options += '<option value="larnaca">Larnaca</option>';

这将执行两个语句的串联。实际上，您选择如何执行此操作取决于您认为更具可读性且更易于维护。