显示来自 <select> 标签的选项文本

Question

我想获取或显示我 <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) 调用外部 js ajax for php that returns the <option> 例如 <select></select> 的 id 如果你有一个 <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>

Answer 1

为什么你的不工作

您使用了：

son.text()

虽然可能有违直觉，但 jQuery 给你的是 JavaScript DOM 对象，而不是 jQuery 对象。因此，您不能从 JavaScript 对象调用 jQuery 函数 .text()。要解决此问题，只需将其更改为 $(son).text()。但是，这将抓取所选内容中的所有文本，而我们只需要所选选项的文本。因此，我决定使用 .find() 和一个选择器来缩小搜索范围，该选择器会检查该值是否与所选值相同。

解决方案

所以，这是我的版本：

console.log($(son).find("[value='"+son.value+"']").text());

将它应用到您的代码中

$(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).find("[value='"+son.value+"']").text());
            //This consolelog, displays the value of the option selected
            console.log(son.value);

        });
    });
});

<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 value="-1">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 value="-1">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 value="-1">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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

显示来自 <select> 标签的选项文本

Display option Text from <select> tag

html

jquery

html-select

jquery-selectors

为什么你的不工作

解决方案

将它应用到您的代码中