在jQuery中選擇下一個“選擇”項

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()了。