【发布时间】：2017-08-09 15:37:03
【问题描述】：
我想获取或显示我的<select> 中选择的选项的文本，但问题是这些是动态生成的，所以我不知道如何使用选择器 (jquery) 来捕获这些值
这是我的 html，<select> 可以更改
<div>
<ul style="list-style-type: none;">
<li>
<input type="checkbox" name="filterCur" value="AutorCu"><label> Autor</label><br>
</li>
<li>
<input type="checkbox" name="filterCur" value="EscuelaCu"><label> Escuela</label><br>
</li>
<li>
<input type="checkbox" name="filterCur" value="CategoriasCu"><label> Categorias</label><br>
</li>
</ul>
<div id="searchCu"><select id="AutorCu"><option>Seleccione una opción</option>
<option value="1">foo1</option>
<option value="2">foo2</option>
<option value="3">fooN</option>
</select>
<select id="EscuelaCu"><option>Seleccione una opción</option>
<option value="1">Instituto de Artes</option>
<option value="2">Instituto de Ciencias Basicas e Ingenieria</option>
<option value="3">Instituto de Ciencias de la Salud</option>
</select>
<select id="CategoriasCu"><option>Seleccione una opción</option>
<option value="1">Arte y arquitectura</option>
<option value="2">Economia y empresa</option>
<option value="3">Medios de comunicacion</option>
<option value="4">Ingenieria</option>
</select></div>
<button id="BuscarCu" class="btn btn-default">Buscar</button>
还有 JS
<script>
$(document).ready(function () {
//Cursos Procedures
$("input[name=filterCur").click(function () {
var checkboxes = $("input[name=filterCur]");
var searchCu=$("#searchCu");
$.each(checkboxes,function (index, chk) {
if(chk.checked)
switch(chk.value){
case "AutorCu":
//console.log("has seleccionado "+chk.value);
searchCu.find("#"+chk.value).remove();
searchCu.append($("<select>",{id:chk.value}));
listAutores("#"+chk.value);
break;
case "EscuelaCu":
//console.log("has seleccionado "+chk.value);
searchCu.find("#"+chk.value).remove();
searchCu.append($("<select>",{id:chk.value}));
listEscuelas("#"+chk.value);
break;
case "CategoriasCu":
//console.log("has seleccionado "+chk.value);
searchCu.find("#"+chk.value).remove();
searchCu.append($("<select>",{id:chk.value}));
listCategorias("#"+chk.value);
break;
default:
//console.log("el valor seleccionado esta mal, torpe");
}
else{
switch(chk.value){
case "AutorCu":
//console.log("has seleccionado "+chk.value);
searchCu.find("#"+chk.value).remove();
break;
case "EscuelaCu":
//console.log("has seleccionado "+chk.value);
searchCu.find("#"+chk.value).remove();
break;
case "CategoriasCu":
//console.log("has seleccionado "+chk.value);
searchCu.find("#"+chk.value).remove();
break;
default:
//console.log("el valor seleccionado esta mal, torpe");
}
}
})
});
$("button#BuscarCu").on("click",function () {
var siblings = $("#searchCu > select");
$.each(siblings,function (index, son) {
//this consolelog, should display the option selected
**console.log(son.text());**
//This consolelog, displays the value of the option selected
console.log(son.value);
});
});
});
在您提问或回答之前，listEscuelas(id) 和 listAutores(id) 和 listCategorias(id) 使用 ajax 为 php 调用一个外部 js，该 js 为 <select></select> 的 id 返回 <option>
如果你有一个<select id="foo"> 然后你打电话给listEscuelas(id) 填充foo id 应该是 id="#foo" 并且结果将类似于这些或其他选项
<select><option value="1">Instituto de Artes</option>
<option value="2">Instituto de Ciencias Basicas e Ingenieria</option>
<option value="3">Instituto de Ciencias de la Salud</option>
【问题讨论】：
-
console.log(son.text()); 这是应该显示
<option>文本的控制台日志 -
下一次，请尝试构建一个较小的问题示例。你在这里提交的代码太多了。
标签： jquery html jquery-selectors html-select