jQuery seleccionar elementos de opción por valor

89

Tengo un elemento de selección envuelto por un elemento de intervalo. No se me permite usar la identificación de selección, pero se me permite usar la identificación de intervalo. Estoy tratando de escribir una función javascript / jquery en la que la entrada es un número i, que es uno de los valores de las opciones de selección. La función cambiará la opción correspondiente a seleccionada.

<span id="span_id">
    <select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
        <option value="1">cleaning</option>
        <option value="2">food-2</option>
        <option value="3">toilet</option>
        <option value="4">baby</option>
        <option value="6">knick-knacks</option>
        <option value="9">junk-2</option>
        <option value="10">cosmetics</option>
    </select>
</span>

Escribí algo de la siguiente manera (esto no funciona completamente, por eso estoy publicando esta pregunta):

function select_option(i) {

    options = $('#span_id').children('select').children('option');
    //alert(options.length); //7
    //alert(options[0]); //[object HTMLOptionElement]
    //alert(options[0].val()); //not a jquery element
    //alert(options[0].value); //1

    //the following does not seem to work since the elements of options are DOM ones not jquery's
    option = options.find("[value='" + i + "']");
    //alert(option.attr("value")); //undefined
    option.attr('selected', 'selected');

}

¡Gracias!

arrebatado
fuente

Respuestas:

148

Aquí está la solución más simple con un selector claro:

function select_option(i) {
  return $('span#span_id select option[value="' + i + '"]').html();
}
jonathan.cone
fuente
32

Con jQuery> 1.6.1 debería ser mejor usar esta sintaxis:

$('#span_id select option[value="' + some_value + '"]').prop('selected', true);
damoiser
fuente
29

Simplemente envuelva su opción en $ (opción) para que actúe de la manera que usted desea. También puede acortar el código haciendo

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")
Adrián Rodríguez
fuente
6
options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option); 

aquí está el violín http://jsfiddle.net/hRFYF/

Rafay
fuente
6

Puede usar .val () para seleccionar el valor, como el siguiente:

function select_option(i) {
    $("#span_id select").val(i);
}

Aquí hay un jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/

tom
fuente
¿En qué navegador / plataforma no le funcionó? En Mac / Chrome, selecciona correctamente un elemento de la lista, que es exactamente lo que era la pregunta original.
tom
@ Sr.Llama, es posible que haya entendido mal la pregunta. El código de @ tom hace lo que se le pidió: dado un valor i, seleccione el i optionen el select. OP no estaba tratando de filtrar las opciones.
Paul
4

Para obtener el valor, simplemente use esto:

<select id ="ari_select" onchange = "getvalue()">
<option value = "1"></option>
<option value = "2"></option>
<option value = "3"></option>
<option value = "4"></option>
</select>

<script>
function getvalue()
{
    alert($("#ari_select option:selected").val()); 
}
</script>

esto buscará los valores

Arijit Ghosh
fuente
1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}
Hogan
fuente
¡Gracias! No sé cuál es la implementación interna de jQuery, pero las otras soluciones parecen más simples.
rapto el
Si ya tiene jQuery, esos son más fáciles, pero pensé que es posible que desee conocer una forma pura de js de hacerlo.
Hogan
0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
rsc
fuente