Question

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

我对jQuery了解不多，还在学习。这是我到目前为止的尝试

$('#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

这会将下拉菜单的值设置为＆＃34;桌面编程＆＃34;：

if(this.value = "Desktop Programming")

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

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

Fiddle 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('');
});

Fiddle 2

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

1 个答案: