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

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事件。

Answer 1

这将下拉到“桌面编程”的值设置为：

if(this.value = "Desktop Programming")

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

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

Fiddle 1

在JavaScript中放置选项的另一种方法是将它们作为隐藏的optgroup放在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