javascript - 从父选择列表创建子类别选择列表

Question

我正在尝试创建一个选择列表，该列表根据主类别列表中所选值的内容进行填充。到目前为止，我还没有取得什么成功，也许有一种简单的方法可以做到这一点，而且我想得太多了。

我对 jQuery 不太了解，还在学习中。 这是我迄今为止的尝试

https://jsfiddle.net/b4cg04bj/3/

$('#category').on('change', function() {
  if(this.value = "Desktop Programming") {
    $("#subcategory").html("<option value='C/C++'>C/C++</option><option value='Python'>Python</option><option value='Visual Basic'>Visual Basic</option><option value='Visual C#'>Visual C#</option>");    
  } 
  else if(this.value = "Graphic Design") {
   $("#subcategory").html("<option value='Adobe Illustrator'>Adobe Illustrator</option><option value='Adobe Photoshop'>Adobe Fireworks</option><option value='Adobe Photoshop'>Adobe Photoshop</option><option value='Adobe Photoshop'>Adobe InDesign</option><option value='Adobe Lightroom'>Adobe Lightroom</option><option value='Gimp'>Gimp</option><option value='Coral Draw'>Coral Draw</option>");  
  }
});

就目前情况而言，当您选择“桌面编程”时，列表的行为符合我的预期......但是，在您选择某些内容后，您无法更改父选择框。正如我所说，我是 jQuery 的新手，感觉好像我这样做是错误的，所以我希望有任何替代方法来实现这一点。 我觉得列表没有更新的原因是因为函数运行后它停止监听更改事件。

Answer 1

这会将下拉列表的值设置为“桌面编程”:

if(this.value = "Desktop Programming")

要测试该值，请改用 ===:

if(this.value === "Desktop Programming")

Fiddle 1

<小时/> 将选项放入 JavaScript 中的另一种方法是将它们作为隐藏选项组放入 HTML 中:

CSS:
#subcategory optgroup {display: none;}
#subcategory .GraphicDesign {display: block;}

HTML:
<select id="subcategory">
  <optgroup class="GraphicDesign">
    <option value="Adobe Illustrator">Adobe Illustrator</option>
    <option value="Adobe Fireworks">Adobe Fireworks</option>
    ...
  </optgroup>
  <optgroup class="DesktopProgramming">
    <option value="C/C++">C/C++</option>
    ...
  </optgroup>
</select>

然后，您可以在从主选择框中进行选择时显示适当的optgroup:

$('#category').on('change', function () {
  var cl= '.'+this.value.replace(/ /g,'');
  $('#subcategory optgroup').hide();
  $(cl).show();
  $('#subcategory').val('');
});

Fiddle 2