jQuery seleziona gli elementi delle opzioni in base al valore


89

Ho un elemento di selezione avvolto da un elemento span. Non sono autorizzato a utilizzare l'ID di selezione ma mi è consentito utilizzare lo span id. Sto cercando di scrivere una funzione javascript / jquery in cui l'input è un numero i, che è uno dei valori delle opzioni di selezione. La funzione renderà selezionata l'opzione pertinente.

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

Ho scritto qualcosa come segue (questo non funziona completamente, motivo per cui sto postando questa domanda):

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

}

Grazie!

Risposte:


148

Ecco la soluzione più semplice con un chiaro selettore:

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

32

Con jQuery> 1.6.1 dovrebbe essere meglio usare questa sintassi:

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

29

Metti semplicemente la tua opzione in $ (opzione) per farla agire nel modo desiderato. Puoi anche abbreviare il codice facendo

$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")


6

Puoi usare .val () per selezionare il valore, come segue:

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

Ecco un jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/


Su quale browser / piattaforma non ha funzionato per te? Su Mac / Chrome, seleziona correttamente un elemento nell'elenco, che è esattamente quello che era la domanda originale.
tom

@ Mr.Llama, potresti aver frainteso la domanda. Il codice di @ tom fa ciò che è stato chiesto: dato un valore i, seleziona l'i esimo optionnel file select. OP non stava cercando di filtrare le opzioni.
Paul

4

Per ottenere il valore basta usare questo:

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

questo recupererà i valori


1
function select_option(index)
{
    var optwewant;
    for (opts in $('#span_id').children('select'))
    {
        if (opts.value() = index)
        {
            optwewant = opts;
            break;
        }
    }
    alert (optwewant);
}

Grazie! Non so quale sia l'implementazione interna di jQuery, ma le altre soluzioni sembrano più semplici.
rapito il

Se hai già jQuery quelli sono più facili, ma ho pensato che potresti voler conoscere un modo puro js per farlo.
Hogan

0
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.