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

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的新手，感觉好像我做错了这个，所以我很感激实现此目的的任何其他方法。 我觉得列表未更新的原因是因为函数运行后，它不再侦听on change事件。

Answer 1

这会将下拉菜单的值设置为“ Desktop Programming”：

if(this.value = "Desktop Programming")

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

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

小提琴1

---

将选项放在JavaScript中的另一种方法是将它们作为隐藏的 optgroups放在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(''); }); 

小提琴2