Question

我想创建一个可靠的下拉菜单，但无法使用jQuery来实现子下拉菜单：

这些是元素：

var types = $('#categorias').next('div').next('select[name="type_id"]').html();
console.log(types);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">
  <label for="category_id">Categoría</label>
  <select id="categorias" class="form-control" name="category_id">
    <option value="">Elegir categoría: </option>
    <option value="1">Frutas y verduras</option>
    <option value="2">Alimentos a granel</option>
    <option value="3">Alimentos envasados</option>
    <option value="4">Bebidas</option>
    <option value="5">Art. de aseo personal</option>
    <option value="6">Art. de limpieza</option>
  </select>
</div>
<div class="form-group">
  <label for="type_id">Tipo de producto</label>
  <select name="type_id" class="form-control">
    <option>Elegir tipo de producto: </option>
    <option value="1">Tomate</option>
    <option value="2">Plátano</option>
    <option value="3">Naranja</option>
    <option value="4">Manzana</option>
    <option value="5">Palta</option>
    <option value="6">Papa</option>
    <option value="7">Spaghetti 5</option>
    <option value="8">Cabello de Ángel</option>
  </select>
</div>

我无法到达第二个下拉菜单中的代码以从中删除所有选项，并使用新选项重新填充它。

我正在尝试：

$('#categorias').first().closest('div').next('select[name="type_id"]');

但是我得到的是未定义的或空集。

编辑：我需要澄清的是，这只是可以动态创建的一组表单中的一个选择，因此我只想到达下一个表单，而不必不小心删除其中的几个表单，也不必添加单个ID。

Answer 1

要从一种选择转到下一种选择，请使用以下格式：

$('select').closest('div.form-group').next('div.form-group').find('select')

.closest()遍历DOM，向下.find()遍历。

在jQuery中选择下一个“选择”项

1 个答案: