jQuery selecionar elementos de opção por valor

89

Eu tenho um elemento select envolvido por um elemento span. Não tenho permissão para usar o id de seleção, mas tenho permissão para usar o id do span. Estou tentando escrever uma função javascript / jquery na qual a entrada é um número i, que é um dos valores das opções do select. A função mudará a opção relevante para selecionada.

<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>

Escrevi algo da seguinte forma (não funciona completamente, e é por isso que estou postando esta pergunta):

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');

}

Obrigado!

arrebatado
fonte

Respostas:

148

Esta é a solução mais simples com um seletor claro:

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

Com jQuery> 1.6.1 deve ser melhor usar esta sintaxe:

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

Apenas envolva sua opção em $ (opção) para fazê-la agir da maneira que você deseja. Você também pode tornar o código mais curto fazendo

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")
Adrian Rodriguez
fonte
6
options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option); 

aqui está o violino http://jsfiddle.net/hRFYF/

Rafay
fonte
6

Você pode usar .val () para selecionar o valor, como o seguinte:

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

Aqui está um jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/

tom
fonte
Em qual navegador / plataforma não funcionou para você? No Mac / Chrome, ele seleciona com sucesso um item na lista, que é exatamente o que a pergunta original era.
tomo de
@ Mr.Llama, você pode ter entendido mal a pergunta. O código de @ tom faz o que foi pedido: dado um valor i, selecione o enésimo optionno select. OP não estava tentando filtrar as opções.
Paulo
4

Para obter o valor, basta usar isto:

<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>

isto irá buscar os valores

Arijit Ghosh
fonte
1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}
Hogan
fonte
Obrigado! Não sei qual é a implementação interna do jQuery, mas as outras soluções parecem mais simples.
arrebatado em
Se você já tem o jQuery, esses são mais fáceis, mas achei que você pode querer saber uma maneira pura de fazer isso js.
Hogan,
0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
rsc
fonte